Javascript 如何在React中通过子索引传递道具

我正在尝试为React开发一个通用容器，其工作原理如下：

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

---

这可能吗？

我认为

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>
    )
}

render（）{
const{children}=this.props；
const tabs=这个；
const childrenWithProps=React.Children.map（Children，（child，id）=>
cloneElement（child，{show:this.state.shows[i]}）；
返回(
{tabs}
{childrenWithProps}
)
}

您想对显示的

道具做什么？您可以存储索引和一个布尔值，表示该特定索引是否显示在
PanelContainer
状态中。我基本上想要一个动态版本：
，这样我就可以简单地在PanelContainer状态中通过ID设置它。您可以查看
seapig
库的实现。你可以找到一些解决问题的方法。在读了几遍之后，我知道你想要做什么。如果明天我醒来时没有人回答这个问题，我会回答，并为您提供一个工作代码笔。干杯。@euvs看起来有很多代码需要处理，但我认为答案是一个很好的解决方案。这不会导致额外的标记/Dom元素吗？但它看起来是一个不错的解决方案，我不知道您想如何将子对象和选项卡渲染到DOM中。我只是添加了一个演示，这样你就可以很容易地得到这个想法。
this.props.children[0].props.shown = false;

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>
    )
}