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

Question

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

容器.tsx

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

计数器.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...
);
};

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

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

Answer 2

现在可以进一步简化，因为 TypeScript 2.8 添加了ReturnType，通过获取useState钩子的返回类型。

interface CounterProps {
numState: ReturnType<typeof useState<number>>
}
const Counter = ({ numState: [num, setNum] }: CounterProps) => {
const handleClick = () => {
setNum(num + 1)
}
}