Question

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

目前我将组件作为反应元素传递给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's documentation他们似乎正在通过反应类。

var LinkComponent = React.createClass({
    render: function() { return <a href ... </a> } 
});
var columnMeta = [ { "customComponent": LinkComponent };

然后使用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));

Answer 1

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

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

Answer 2

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

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

那说到你的具体问题：我喜欢将一个组件传递给一大块JSX代码的想法，因为前者让子组件控制如何呈现它。 MyModal应负责渲染其子女，而不是要求其父母（通过道具）代替他们。这有一个额外的好处，即允许MyModal在状态更改后更改详细信息 - 现在，它只是接收静态标记来呈现。

将元素与反应类传递给可选显示的模态

2 个答案: