将 setState 作为道具传递或创建句柄答案

【问题标题】：Pass setState as props or create a handle将 setState 作为道具传递或创建句柄
【发布时间】：2020-10-17 05:17:01
【问题描述】：

我可以将setPlaying 作为道具传递吗？或者我必须做类似这个示例代码的事情？

组件Two 和Three 可以在它们自己的文件中。

export const myComponent = () => {
  const [playing, setPlaying] = useState(false);

  const handleChange = (show) => {
    setPlaying(show);
  };

  return (
    <>
      <One />
      {!playing ? (
        <Two handleChange={handleChange} />
      ) : (
        <Three handleChange={handleChange} />
      )}
    </>
  ) 
};

const Two = ({ handleChange }) => {
  return (
    <Container>
      <Button onClick={{(e) => handleChange(true)}}>Click to Show Component Three</Button>
    </Container>
  );
};

const Three = ({ handleChange }) => {
  return (
    <Container>
      <Button onClick={{(e) => handleChange(false)}}>Click to Show Component Two</Button>
    </Container>
  );
};

【问题讨论】：

是的，你绝对可以做到。

标签： reactjs

【解决方案1】：

当然。如果您希望在myComponent 中进行任何进一步的处理，用handleChange 包装setPlaying 是有利的。并且条件渲染将防止不必要的重新渲染。

【讨论】：

【解决方案2】：

是的，你可以这样做。此外，您对处理程序执行的操作也是一个很好的做法。

参考：Passing setState to child component using React hooks

【讨论】：