使用onClick将状态/道具发送到React中的另一个组件

问题描述

我有两个单独的组件，它们没有简单的父子关系。

svg {
    width: inherit;
    height: inherit;
}

当用户单击按钮并将其值发送到ComponentFolderA | ButtonComponent ComponentFolderB | BannerComponent 时，我想setState

解决这个问题的最佳方法是什么？

解决方法

在功能组件中，可以在父组件中为ButtonComponent和BannerComponent创建状态。然后执行以下示例，

const Parent = () => {
    const [sampleState,setSampleState] = useState(null);

    return (
      <>
          <BannerComponent sampleState={sampleState} />
          <ButtonComponent setSampleState={setSampleState} />
      </>
    )
}

然后，您可以在ButtonComponent内部作为道具访问setSampleState。

另外，请检查Best practice way to set state from one component to another in React，然后可以使用状态管理器（Context API，Redux）

,

保持父状态，并将状态设置功能发送给您的按钮。

const Parent = () => {
  const [myState,setMyState] = useState(false);
  
  return (
    <>
      <BannerComponent myState={myState} />
      <ComponentWithButton setMyState={setMyState} />
    </>
  )
}

const ComponentWithButton = props => {
  return (
    <Button onClick={() => props.setMyState(true)} />
  )
}