如何在React的父组件内渲染Child的单个实例到项映射?

Question

在下面的父组件中，如何将其调整为仅对被单击的项映射中的特定div(子组件)进行appendChild，而不是对所有五个div的项映射onClick进行调整?目前，如果单击div，每个div都会呈现一个子组件。这里的目的是仅将Child的单个实例呈现给被单击的特定div。例如，如果单击了div id='one'，则<Child />应该只追加到该div。

const Child = () => {
return (
<div>Child</div>
)
}
const Parent = () => {
const [items, setItems] = useState([])
const [child, setChild] = useState(<></>)
useEffect(() => {
setItems([
'one', 'two', 'three', 'four', 'five'
])
}, [])
const appendChild = () => {
setChild(<Child />)
}
return (
<div>
{items.map(item => {
return (
<div
id={item}
onClick={appendChild}
>
{item}
{child}
</div>
)
})}
</div>
)
}
export default Parent

Answer 1

您可以删除子状态并添加一个clickkeditems状态，其中包含被单击的项，并在项被单击时呈现子组件。这是一种可能的方法。

const Child = () => {
return <div>Child</div>;
};
const Parent = () => {
const [items, setItems] = useState([]);
const [clickedItems, setClickedItems] = useState([]);
useEffect(() => {
setItems(["one", "two", "three", "four", "five"]);
}, []);

return (
<div>
{items.map((item, index) => {
return (
<div key={index} id={item} onClick={() => setClickedItems((prevValue)=> [...prevValue, item])}>
{item}
{clickedItems.includes(item) && <Child />}
</div>
);
})}
</div>
);
};