如何关闭其他组件的子组件？答案

【问题标题】：how to close child of other components?如何关闭其他组件的子组件？
【发布时间】：2017-11-08 00:27:18
【问题描述】：

enter image description here

当我打开三个 comonent A child open 之一时，我想关闭另外两个打开的孩子。

【问题讨论】：

在询问 Stack Overflow 之前，您应该做一些研究和/或尝试自己解决问题。你的帖子甚至不包含一个问题——它只是说“这就是我想要的”，对此的回应是......“好吧，是什么阻止了你？”。考虑通过询问您问题的特定部分来缩小您的问题范围，或者包括您自己解决问题的尝试，以便我们可以纠正它们。如需更多信息，请查看How To Ask 页面。

标签： reactjs redux flux

【解决方案1】：

使用一个道具来处理每个孩子的打开状态。将open={false} 传递给其他两个孩子，并将open={true} 传递给您要打开的孩子。没有任何代码示例，很难给出有意义的答案。

【讨论】：

【解决方案2】：

它的要点是

// where openChild is just the index of the child that should be open
// fetched from redux
// you should use an id here instead of an index
const Parent = ({ openChild }) => {
    return [0, 1, 2].map((index) => (
        <Child key={index} index={index} closed={openChild !== index}/>
    ))
}

const Child = ({ index, closed }) => {
    return <div className={closed ? 'closed' : 'open'}>{index}</div>
}

在孩子上使用.open 和.closed 来控制是否显示它，或者您可以有条件地渲染整个东西，例如

const Parent = ({ openChild }) => {
    return [0, 1, 2].map((index) => (
        openChild !== index 
            ? <Child key={index} index={index} />
            : null
    )).filter(child => !!child)
    /* you don't really need the above line */
}

【讨论】：