reactjs 如何将JSX元素从子组件传递到父组件?

e4yzc0pl  于 2023-08-04  发布在  React
关注(0)|答案(1)|浏览(148)

可以通过props将JSX元素从父组件传递到子组件。
但据我所知,不推荐使用useState来存储JSX元素,因此我不能简单地将回调传递给子对象,然后使用它来存储父对象状态中的JSX组件。
有没有其他方法可以做到这一点?
我这样做是为了传递一个按钮,这个按钮将管理一个兄弟的状态。

ffx8fchx

ffx8fchx1#

不要将JSX元素从父元素传递给子元素。通过这个链接:https://react.dev/learn/responding-to-events
从本质上讲,父组件应该完成处理状态的所有工作。
您的子组件(按钮)唯一需要接受的是在父组件中定义的事件处理程序。
举例来说:

export default function Parent() {
  const [clicked, setClicked] = useState(false);

  function handleClick() {
    setClicked(true);
  }

  return <TestButton onButtonClicked={handleClick}/>;
}

export default function TestButton({onButtonClicked}) {
  return <button onClick={onButtonClick}/>;
}

字符串
注意测试按钮除了触发从父项传递给它的事件处理程序之外什么都不做。当事件被触发时,父级执行将“clicked”的状态从false设置为true的工作。

相关问题