如果我理解正确的话，当点击方块2时，你希望方块1是黑色的，方块2（当前活动的方块）是橙子的。
如果是，那么试试：

const Parent = () => {
  const [activeIndex, setActiveIndex] = useState(null);

  // Callback function to be passed down to Square component
  const onSquareClick = (index) => {
    setActiveIndex(index);
  };

  const myTwoSquares = [0, 1].map((i) => (
    <Square
      index={i}
      active={i === activeIndex} // This is important
      onClick={onSquareClick}
      key={i}
    />
  ));

  return <div>{myTwoSquares}</div>;

然后在Square组件中，您可以有条件地检查active属性并将活动Square设置为橙子。

const Square = ({ index, active, onClick }) => {
  const actualColor = active ? "orange" : "black";
  const onSquareClick = () => {
    onClick(index);
  };
return (
    <div
     onClick={onSquareClick}
     style={{ backgroundColor: actualColor}}
    ></div>  );

如果你想改变多个组件，你必须将你的状态移动到它们的公共父节点，并将状态作为prop传递或使用React Context。

const Parent = () => {
   const [color, setColor] = useState('black')
   const changeColor = () => setColor("orange")
   return (
     <>
       <Square color={color} changeColor={changeColor} />
       <Square color={color} changeColor={changeColor} />
     </>
)}

const Square = ({color, changeColor}) => {

  return(
    <div onClick={changeColor} style={{color: color}}>
      content
    </div>
  )
}