陣營：隱藏/顯示元素，而隱藏在類似的元素

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>