Reactjs 反应：隐藏/显示一个元素，同时隐藏其他类似元素

我有一个食谱创造者，他创建食谱并列出它们的成分。我希望它只显示配方名称和它里面的div，但是当你点击它时，它会显示配料部分。如果任何其他部分是开放的，我希望它也关闭他们

我已经尝试了几个国家的解决方案，但还没有拿出一个坚实的解决方案。我可能可以用jQuery来做，但我听说使用React和jQuery不是很好的做法，所以我宁愿正确地做

这是完整的应用程序：

配方框通过主应用程序渲染函数中的.map进行渲染，如下所示：

{Recipes.map(function(item, key) {
                    return <RecipeBox recipe={Recipes} name={item.name} ingredients={item.ingredients} order={item.order} key={key} generalUpdate={genUpdate}  />;
})}

{Recipes.map（函数（项，键）{
返回；
})}

只显示一种成分会更容易。关闭其余的将有点棘手

显示成分-无需重复，您可以添加状态属性

isOpen

。单击该组件中的按钮时，它应将状态属性

isOpen

更改为true。基于该状态属性值隐藏/显示成分，您可以在标记（如下所示）中或使用类和CSS规则进行隐藏/显示

<div key={1}>
  showIngredients = () => { this.setState({isOpen: true}) }
  <button onClick={this.showIngredients}>Show ingredients</button>
  {this.state.isOpen && <div>Ingredients list</div>}
</div>

---

对于第一个解决方案，如果将状态设置为true，则不会使其应用于每个框，从而使它们全部打开？状态是组件实例的本地状态。如果列表中有3个

ChildItem

s，则每个都将有一个不同的

this.state

对象。因此，在示例一中，打开条目2只会更改条目2的状态对象。啊，这更有意义。我想我只是想弄清楚如何在主应用程序中包含状态，因为我想我在某个地方读到，多个区域中的状态是不好的做法。但我可能误读了。多个地区的州肯定会变得毛茸茸的。采取某种类似的方式是与国家保持理智的关键部分。我的答案中的解决方案1通常在本地州完成，但解决方案2通常最好使用redux之类的工具。这就是说，redux在使事情变得更好之前确实会使事情变得复杂。而且，如果操作正确，“在多个区域中进行状态”也不是一个坏做法。把你所有的州都放在一棵大的州树上会有很高的成本。

// parent
revealChild = (key) => {this.setState(selectedKey: key)}
...
<div>
  {children.map((child) => {
    return <Child onReveal={this.revealChild} key={child.key} isSelected={this.state.selectedKey == child.key}/>
  })}
</div>

// child
handleReveal = () => this.props.onReveal(this.props.key)
showIngredientsClass = () => this.props.isSelected ? 'visible' : 'hidden'
showButtonClass = () => this.props.isSelected ? 'hidden' : 'visible'
...
<button onClick={handleReveal} className={this.showButtonClass()}>Show ingredients</button>
<div className={this.showIngredientsClass()}>
  My ingredients
</div>