阵营：隐藏/显示元素，而隐藏在类似的元素

Question

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

我已经尝试了几种解决方案与状态，但还没有拿出一个坚实的解决方案。我可以用jQuery来做，但我听说使用React和jQuery不是很好的做法，所以我宁愿这样做。

这是一个完整的应用程序：https://github.com/jeffm64/recipe-box2/tree/master/src/components

配方框通过.MAP在主应用程序渲染的渲染功能如下所示：

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

Answer 1

揭示只是一个组员的成分会比较容易。关闭其余的将会有点棘手。

揭示配料 - 没有Redux，你可以添加一个国家属性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> 

隐藏其他成分 - 这是有点麻烦，并需要一种不同的解决方案。您需要在父组件中定义一个方法来设置所有子组件的状态。请注意上述组件中的key。如果每个孩子都有一个唯一的密钥，并且父定义selectedKey一个国家的财产，你可以做这样的事情：

// 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>