How I can render react components without jsx format?

问题

I try to make my "smart" popup component, which can open inside itself some components, but my realization isn't good, because it doesn't work.

I use redux approach for creating popup and action of opening my popup is able to get name of any component for rendering before popup will be open;

But I've some problem, after getting parameter, in our case it's nameOfComponent, I need to choose and render component with name nameOfComponent.

And my question now, how do It can render component from array?

// He's my components
import Login from '../Login/login.js';
import Logout from '../Logout/logout.js';


const popupContent = {
    Login : Login,
    logout: Logout
};

// My component 
class Popup extends Component {

    componentDidUpdate () {
        // for example
        const nameOfComponent = "Login";

        this.body = this.setBodyPopup(nameOfComponent);

        return true;
    }

    setBodyPopup(property){
         return popupContent[property];
     }


    render() {
        // I want to render some element from popupContent here
        <div>
            // <this.body /> // it's jsx format
            {this.body}
        </div>
    }
}

回答1:

I added working example here JSfiddle ReactJS

You dont have to use JSX. If you do, right way to do this is to use factory. You can also render regular HTML in the render method, as well as to use vanilla javascript in your code using curly braces.

Also to get I would recommend mapping and iterating through all your items in array and render them one by one in the render method

see example below:

var Login = React.createClass({
  render: function() {
    return <div>{this.props.name}, logged in</div>;
  }
});

// React with JSX
ReactDOM.render(<Login name="John" />,
  document.getElementById('containerJSX'));

// React without JSX
var Login = React.createFactory(Login);
ReactDOM.render(Login({ name: 'Tim' }),
  document.getElementById('containerNoJSX'));

回答2:

As commentators suggest, you might want to specify this.body either in constructor or within the render method itself.

However, if I understand your intention correctly, you could just use this.props.children instead. E.g.

<Popup><MyInnerComponent></Popup>

and in Popup render method

render() {
    <div>
        {this.props.children}
    </div>
}

回答3:

React actually allows you to use variables with JSX syntax to instantiate components. You should actually be able to call <this.body /> and have it work; however yours will not because you do not define this.body until the componentDidUpdate method, which means it will be undefined for the first render and break everything. I would suggest using local component state for this instead of this.body and making sure it is defined from the start.

At the very least, instantiate this.body in a constructor to some value:

constructor(props) {
    super(props);
    this.body = 'Login';
}

回答4:

You can use <this.body /> to render the component, as long as this.body has an actual value. Perhaps you just need:

render() {
    return <div>
        {this.body ? <this.body /> : null}
    </div>
}

With the example you gave, though, you can just put the contents of your componentDidMount in the constructor instead, because the constructor is invoked before the first render pass.

回答5:

I think you are looking at something like dangerouslySetInnerHtml.

<div dangerouslySetInnerHTML={this.body} />

来源：https://stackoverflow.com/questions/36222289/how-i-can-render-react-components-without-jsx-format

标签

javascript

reactjs

redux

jsx