How can I render components without jsx format?

Question

I'm trying to create my own smart pop-up component that can open some components inside myself, but my implementation is not very good because it does not work.

I use the reduction method to create pop-ups, and the action of opening my pop-up allows me to get the name of any component to render before the pop-up opens;

But I have a problem, after receiving the parameter, in our case it is nameOfComponent , I need to select and display a component named nameOfComponent .

And now my question is, how can it display a component from an array?

// He 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 jsx format {this.body} </div> } } 

Answer 1

I added a working JSfiddle ReactJS example here

You do not need to use JSX. If you do this, the correct way to do this is to use the factory. You can also display plain HTML in the rendering method, and also use javascript in your code using curly braces.

Also, to get, I would recommend matching and repeating all of your elements in an array and rendering them one by one in the rendering 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')); 

Answer 2

As commentators point out, you can specify this.body either in the constructor or in the rendering method itself.

However, if I understand your intent correctly, you can simply use this.props.children . For instance.

 <Popup><MyInnerComponent></Popup> 

and in the Popup render method

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

Answer 3

React actually allows you to use variables with JSX syntax to create components. In fact, you should call <this.body /> and work with it; however, yours will not, because you do not define this.body before the componentDidUpdate method, which means that it will be undefined for the first render and break everything. I would suggest using the local state of the component for this instead of this.body and make sure that it is defined from the very beginning.

At least create an instance of this.body in the constructor up to some value:

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

Answer 4

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

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

In the above example, you can simply put the contents of your componentDidMount into the constructor instead, because the constructor is called before the first render pass.

Answer 5

I think you are looking at something like dangerouslySetInnerHtml .

 <div dangerouslySetInnerHTML={this.body} />