1

我有一个表格单元格，用户可以单击该表格单元格，它将启动一个显示其他详细信息的 react-bootstrap 模式。模态显示一个具有自己状态的组件，如果商店没有所需的数据，它可能会触发从后端提取数据的操作。

目前我将组件作为反应元素传递给 react-bootstrap 的 OverlayMixin 以显示模式中的详细信息，但我想知道是否应该传递一个反应类并使用 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));
4

2 回答 2

1

由于 Griddle 使用该customComponent属性来呈现column 中的每个项目，因此它必须是 ReactComponent 类，否则它将为每一行呈现完全相同的组件。换句话说，customComponent代表一个模板来创建新的 ReactElement。（我个人更希望能够传递一个接收适当属性并返回 ReactElement 的函数。）

在您的情况下，您只需要指定一个组件，因此传递 ReactElement 是有意义的。从最终用户的角度来看，它也更强大，因为您可以创建一个连接到其父级的组件。这也是使用时很常见的模式this.props.children。

于 2015-06-20T16:15:36.413 回答
1

首先，我会犹豫像这样传递 JSX 代码。React.js 为您提供了元编程工具——将事件处理程序和标记注入子组件非常容易，而且通常看起来是最简单的做事方式。那样就是毁灭，IMO。像这样动态构建的组件总是很难调试，因为它很难追踪任何东西的来源。props并且state更适合传递更简单的数据结构，将实际的渲染逻辑卸载到感兴趣的组件。

对这一点的公平批评可能是，“这就是像 MaterialUI 和 ReactBootstrap 这样的库的做法！它们到处注入回调和标记。” 好吧，他们正在为开发人员构建抽象接口和 UI。我们拥有构建具体接口的奢侈，这些接口可以用抽象来换取清晰度和可读性。我们不必一直抽象一切。

也就是说，对于您的具体问题：我喜欢将组件传递给一大块 JSX 代码的想法，因为前者让子组件控制如何呈现它。MyModal 应该负责渲染它的孩子，而不是要求它的父母（通过道具）来做这项工作。这具有允许 MyModal 在状态更改后更改 Details 的额外好处——现在，它只是接收要呈现的静态标记。

于 2015-06-20T16:22:12.590 回答