问如何在React中通过子索引传递属性
EN

Stack Overflow用户

提问于 2018-08-06 09:26:55

回答 1查看 191关注 0票数 3

我正在尝试为React开发一个通用容器，它的工作原理是这样的：

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

我想在容器中动态创建一个tab系统，它的工作原理如下：

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;

这个是可能的吗？

javascript

reactjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-06 11:50:16

我认为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>
    )
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51699541

复制

相似问题

问如何在React中通过子索引传递属性
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在React中通过子索引传递属性EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在React中通过子索引传递属性
EN