Question

我正在尝试为React开发一个通用容器，它将像这样工作：

<PanelContainer>
    <PanelConsole />
    <PanelMemory />
    <PanelLog />
</PanelContainer>

我想在容器内动态创建一个标签系统，其工作方式如下：

renderTabs = () => {
        return (
            <ul className="panel_tabs">
                {React.Children.map(this.props.children, (child, i) => 
                    <li key={child.type.display_name} onClick={() => this.handleClickTab(i)}>
                        {child.type.display_name}
                    </li>
                )}
            </ul>
        );
    }

这使我可以在类中使用display_name属性呈现选项卡。到目前为止，此方法有效，但现在我试图使单击生效。我希望它动态地工作，所以我不必为面板的每个实例构建专门的容器。理想情况下，我想通过索引在this.props.children中设置子级的属性，例如：

this.props.children[0].props.shown = false;

这可能吗？

Answer 1

我认为React.Children.map和React.cloneElement对您有用：

render() {
    const { children } = this.props;
    const tabs = this._renderTabs();
    const childrenWithProps = React.Children.map(children, (child, id) =>
      React.cloneElement(child, { shown: this.state.shows[i] }));

    return (
         <div>
             <div>{tabs}</div>
             <div>{childrenWithProps}</div>
         </div>
    )
}

我如何在React中通过子索引传递prop

1 个答案: