I have a table cell that the user can click on which will launch a react-bootstrap modal that displays additional details. The modal displays a component that has its own state and may trigger an action to pull data from the back-end if the store doesn't have the data it needs.
Currently I'm passing the component as a react element to react-bootstrap's OverlayMixin to show the details in the modal but I'm wondering if instead I should be passing a react class and rendering it with React.createElement.
Current code:
var MyCell = React.creatClass({
_renderDetails: function () { return (<Details id={this.props.id}/>);
render: function() {
return (
<td>
<MyModal modal={this._renderDetails()}>
{this.props.value}
</MyModal>
</td>
);
}
});
var MyModal = React.createClass({
props: { content: React.PropTypes.element.isRequired }
mixins: [OverlayMixin],
// Called by the OverlayMixin when this component is mounted or updated.
renderOverlay: function() {
if (!this.state.isModalOpen) { return (<span/>); }
return (
<Modal className='information-modal' onRequestHide={this.handleToggle}>
<div className='modal-body'>
{this.props.modal}
</div>
</Modal>
);
}
});
The reason I ask this question is because I was looking at Griddle's documentation they appear to be passing a react class instead.
var LinkComponent = React.createClass({
render: function() { return <a href ... </a> }
});
var columnMeta = [ { "customComponent": LinkComponent };
And then rendering it using React.CreateElement. Source Code
var colData = (<meta.customComponent data= ... />;
returnValue = <td>{colData}</td>);
// Turns into
var colData = React.createElement(meta.customComponent, {data: ...
returnValue = React.createElement("td" ... colData));
Since Griddle uses the
customComponent
property to render each item in a column, it must be a ReactComponent class, otherwise it would render the exact same component for each row. Said another way,customComponent
represents a template to create new ReactElement from. (I personally would prefer to be able to pass a function that receives the appropriate properties and returns an ReactElement.)In your case, you only need to specify a single component, so passing a ReactElement makes sense. It's also more powerful from an end-user perspective, because you can create a component that is wired up to its parent. This is also a very common pattern when using
this.props.children
.