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

Question

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

目前我正在将组件作为反应元素传递给反应-bootstrap 的 OverlayMixin 以在模式中显示详细信息，但我想知道是否应该传递反应 class 并用 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 他们似乎正在通过反应 class。

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 class，否则它将为每一行呈现完全相同的组件。换句话说，customComponent 代表一个模板从中创建新的 ReactElement。（我个人更希望能够传递一个接收适当属性的函数和 returns 一个 ReactElement。）

在你的例子中，你只需要指定一个组件，所以传递一个 ReactElement 是有意义的。从最终用户的角度来看，它也更强大，因为您可以创建一个连接到其父级的组件。这也是使用 this.props.children.

时非常常见的模式

Answer 2

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

对这一点的公平批评可能是，"this is how libraries like MaterialUI and ReactBootstrap do it! They inject callbacks and markup everywhere." 好吧，他们正在为开发人员构建抽象接口和 UI。我们拥有构建具体界面的奢侈，这些界面可以用抽象来换取清晰度和可读性。我们不必一直抽象所有内容。

也就是说，针对您的具体问题：我喜欢将组件传递给一大块 JSX 代码的想法，因为前者让 child 组件控制如何呈现它。 MyModal 应该负责渲染其 children，而不是要求其 parent（通过 props）来完成这项工作。这有一个额外的好处，即允许 MyModal 在状态更改后更改详细信息——现在，它只是接收要呈现的静态标记。

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

Passing an element vs. a react class to an optionally displayed modal

reactjs

react-bootstrap