Question

我想使用react钩子来更改道具，然后我找到了将setState函数作为道具传递给孩子的方式。

Container.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这样的全局状态管理系统。

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

1 个答案: