Question

在react / redux应用程序中，我有一个容器组件，它自己呈现两个子组件：标题和内容部分。我的问题是标题应该呈现容器的标题。但是这个标题实际上是由内容部分定义的。容器的render方法如下所示：

render() {
    return (
        <div className='Container'>
            <ContainerHeader />
            <div className='ContainerContent'>
                {this.renderContent()}
            </div>
        </div>
    );
}

renderContent方法根据容器的状态呈现不同的组件，每个组件定义容器标题的逻辑方式。例如：呈现特定项目的内容应将项目的名称放在容器标题中。

所以也许我在这里有一个误解导致了这个问题。我的基本想法是容器被构造成标题和内容，所以我制作了这两个不同的组件。但是定义标题取决于内容，并且标题的呈现在标题中完成。

如何实现？也许使用React refs？或者我必须在这里更改层次结构概念吗？

Answer 1

有很多方法可以通过refs实现这一目标。但是，在您使用this.renderContent进行渲染之前，我真的建议采用更干净的方法并找出标题。

大概是这样的：

render() {
    const title = this.getTitle();
    return (
        <div className='Container'>
            <ContainerHeader title={title} />
            <div className='ContainerContent'>
                {this.renderContent(title)}
            </div>
        </div>
    );
}

在您的情况下，是否有可能提取决定哪个标题应该在一个级别上呈现为getTitle的函数的逻辑，如此处所示？

React兄弟沟通和渲染

1 个答案: