如何使用钩子从子组件更改道具？

Question

我想使用反应钩子更改道具，我找到了将 setState 函数作为道具传递给孩子的方法。

容器.tsx

const Container: React.FC = () => {
  const [num, setNum] = useState(0);
  return <Counter num={num} setNum={setNum} />;

};

Counter.tsx

interface CounterProps {
  num: number;
  setNum: React.Dispatch<React.SetStateAction<number>>;
}

const Counter: React.FC<CounterProps> = ({ num, setNum }) => {
  const handleClick = () => {
    setNum(num + 1);
  };

  return (
    // jsx codes...
  );
};

它运作良好，但我必须为父组件的每个状态添加两个道具到子组件。有没有更有效的方法来解决这个问题？

Answer 1

这是正确的做法。如果需要，有两种方法可以压缩它。

首先是只传递一个元组而不是两个单独的道具。

const Container: React.FC = () => {
  const [num, setNum] = useState(0);
  return <Counter numState={[num, setNum]} />
};

interface CounterProps {
  numState: [number, React.Dispatch<React.SetStateAction<number>>];
}

const Counter: React.FC<CounterProps> = ({ numState: [num, setNum] }) => {
  const handleClick = () => {
    setNum(num + 1);
  };
};

或者通过传递带有键 'state' 和 'setter' 或类似键的对象来更干净地完成它。

其次，如果你发现你经常使用这类东西，那么你可能需要花一些时间来建立一个像Redux这样的全局状态管理系统。