React onClick仅影响此迭代

Question

我有一个页面，它使用了一个包含列表中列表的对象。我有所有正确显示数据的组件，但我正在尝试为每个主列表项添加一个切换按钮，以便您可以显示/隐藏它们的子列表。我之前做过一些事情，当单击时会影响组件的每个实例，所以当您单击expand按钮时，它会切换每个主项的子列表。

React对我来说是个新手，我将这个项目部分用作学习工具。我认为这与将状态绑定到组件的特定实例有关，但我不确定如何或在哪里执行。

这是组件：

const SummaryItem = props => {
const summary = props.object;
return(
<div className="summary_item">
{Object.entries(summary).map( item =>
<div>
Source: {item[0]} <br />
Count: {item[1].count} <br />
<button onClick={/*expand only this SummaryItemList component*/}>expand</button>
<SummaryItemList list={item[1].items} />
</div>)
}
</div>
);
}

我以前有一个状态挂钩，看起来像：

const [isExpanded, setIsExpanded] = useState(false);
const toggle = () => setIsExpanded(!isExpanded);

在我的渲染功能中，按钮在onClick中具有切换功能：<button onClick={toggle}>expand</button>和我有一个带有两个渲染的条件if(isExpanded)，一个带有SummaryItemList组件，另一个没有。

除了映射对象之外，还有更好的方法吗？我如何绑定切换的状态以仅影响它应该影响的实例？

Answer 1

我想你可能忘了给每个项目一个isExpanded，最好的方法是把你的项目和项目分成不同的组件(在下面的例子中，它是List for items和item for item(。

const { useState } = React;
const Item = ({ name, items }) => {
const [isExpanded, setIsExpanded] = useState(false);
const toggle = () => {
setIsExpanded((s) => !s);
};
return (
<li>
{name}
{items && (
<React.Fragment>
<button onClick={toggle}>
{isExpanded ? '-' : '+'}
</button>
{isExpanded && <List data={items} />}
</React.Fragment>
)}
</li>
);
};
const List = ({ data }) => {
return !data ? null : (
<ul>
{Object.entries(data).map(([key, { items }]) => (
<Item key={key} items={items} name={key} />
))}
</ul>
);
};
const App = () => {
const data = {
A: {
items: {
AA1: { items: { AAA1: {}, AAA2: {} } },
AA2: { items: { AAA: {} } },
},
},
};
return <List data={data} />;
};
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>