如何使用钩子更改子组件的道具？答案

【问题标题】：How do I change props from a child component using hooks?如何使用钩子更改子组件的道具？
【发布时间】：2020-04-03 07:28:50
【问题描述】：

我想使用 react hooks 更改道具，我找到了将 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...
  );
};

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

【问题讨论】：

我认为使用两个这样的道具是没有问题的。这看起来很清楚。

标签： reactjs typescript react-hooks

【解决方案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 这样的全局状态管理系统。

【讨论】：

我认为你可以让它更短：numState: [number, React.Dispatch<number>]