reactjs - 在 React 中使用 .map() 生成一个组件时，如何让一个组件与另一个组件通信？

Question

我有多个组件使用相同的模块map()。

   list.map((data, index) => <MyComponent key={index} value={d}/>)

然后<p>在每个 MyComponent 中单击它时将颜色从绿色变为红色。

const MyComponent = ({value}) => {
    const [clicked, setClicked] = useState(false);
    const buttonOnClick = () => {
        setClicked(true);
    }
    return (
        <div>
            <p style={clicked ? {color: 'green'} : {color: 'red'}}>{value}</p>
            <button onClick={buttonOnClick}>click</button>
        </div>
    );
};

在这种情况下，我想<p>在单击其中一个时将其他 MyComponent 的颜色变为红色。

如何检查<p>其他 MyComponent 的状态？

标签： reactjs

Answer 1

可能最简单的选择是将状态提升到父组件中：https ://reactjs.org/docs/lifting-state-up.html