У меня есть ячейка таблицы, по которой пользователь может щелкнуть, которая запустит модальное окно response-bootstrap, отображающее дополнительные сведения. В модальном окне отображается компонент, который имеет собственное состояние и может запускать действие по извлечению данных из серверной части, если в магазине нет необходимых данных.
В настоящее время я передаю компонент в качестве элемента реакции в OverlayMixin response-bootstrap, чтобы показать детали в модальном окне, но мне интересно, следует ли вместо этого передавать класс реакции и визуализировать его с помощью React.createElement.
Текущий код:
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>
);
}
});
Причина, по которой я задаю этот вопрос, заключается в том, что я просматривал документацию Griddle, которая, похоже, вместо этого передать класс реакции.
var LinkComponent = React.createClass({
render: function() { return <a href ... </a> }
});
var columnMeta = [ { "customComponent": LinkComponent };
А затем рендеринг с помощью React.CreateElement. Исходный код
var colData = (<meta.customComponent data= ... />;
returnValue = <td>{colData}</td>);
// Turns into
var colData = React.createElement(meta.customComponent, {data: ...
returnValue = React.createElement("td" ... colData));
