I want to create a clean & reusable Modal-component like so:
var Modal = React.createClass({
....
render: function() {
return (
<div className={ this.state.className }>
<div className="modal-opacity" onClick={this.toggle}></div>
<section className="modal-content">
<a className="close" onClick={this.toggle}><img src="/images/icon-close.svg" alt="Close" /></a>
<div>
{this.props.module === 'curriculum' ? <Curriculum /> : <Contact /> }
</div>
</section>
</div>
);
To keep it neat — I'd would like to load the modal-content as a Component based on the {this.props.module}
value, that is coming from the initiator component.
Is there a better way of doing this? Something like <{this.props.module}/>
? Or is this insecure? Maybe there's is already something in ReactJS built-in?
You can use this.props.children
to render component's child controls. Like this:
var Control = React.createClass({
render: function() {
return <div>{ this.props.children }</div>;
}
});
var App = React.createClass({
render: function() {
return <Control><h1>child control</h1></Control>;
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.