React：从父级注入通用渲染逻辑

Question

假设我有一个反应组件类，它在单击按钮时显示一个模式对话框。

可以这样创建（在 jsx 中）：

<Modal text={"some text"}/>

现在，我有一堆组件类（我们称它们为面板），它们都有一个名为 getMessage 的函数，我希望所有这些组件都具有相同的行为：模式对话框应该显示字符串从对getMessage 的调用返回。

这样做的直接方法是包含

<Modal text={this.getMessage()}/>

在每个此类组件的 render() 函数中。

现在，假设涉及更多逻辑。例如，如果getMessage 已定义并且不返回null，我只想渲染此组件。

现在开始看起来像这样：

var Panel1 = React.createClass({
    getMessage: function() {return 'wow';},
    render: function() {
        var modal = null;
        if (this.hasOwnProperty('getMessage' && this.getMessage() !== null) {
            modal = <Modal text={this.getMessage()}/>
        }
        return (
            <div>
                {modal}
                ...all other stuff done in panel
            </div>
        );
    }
});

这开始变得很麻烦，因为我需要为我定义的每个组件类都有这个逻辑。

如何在这种情况下实现 DRYness，这样我就不必重复了？

一种方法是定义一个包含此逻辑的实用程序函数，我们将其称为displayModalIfNeeded，然后从渲染中调用它。现在看起来像这样：

return (
    <div>
        {displayModalIfNeeded.call(this)}
        ....all other stuff needed in Panel
    </div>
);

现在是我的实际问题（抱歉冗长的说明）：

假设我有一个名为 <Dashboard> 的父组件，它的所有面板都为其子组件：

<Dashboard>
    <Panel1>
    <Panel2>
    <Panel3>
</Dashboard>

我是否可以在Dashboard 的实现中编写一些内容来完全消除在每个面板中指定关于这些模态组件的任何内容的需要？

意味着 Panel1 实现现在可以是

<div>
    ...all other stuff done in panel
</div>

当它被渲染为Dashboard 的子元素时，它将具有模态对话框和伴随的逻辑。

Answer 1

我建议使用带有 children 属性的包装器组件。你的父组件应该是这样的：

<Dashboard>
    <ModalWrapper text={msg1}>
        <Panel1 />
    </ModalWrapper>
    <ModalWrapper text={msg2}>
        <Panel2 />
    </ModalWrapper>
    <ModalWrapper text={msg3}>
        <Panel3 />
    </ModalWrapper>
</Dashboard>

现在您所有的条件逻辑都可以放在ModalWrapper 中。如果您的问题有“.... Panel 中需要的所有其他内容”，请使用 this.props.children。例如

var ModalWrapper = React.createClass({
    render: function () {
        var text = this.props.text;
        return (
            <div>
                {text ? <Modal text={text} /> : null}
                {this.props.children}
            </div>
        );
    }
});