使用 onClick 将 state/props 发送到 React 中的另一个组件

Question

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

ComponentFolderA 
|
ButtonComponent 

ComponentFolderB
|
BannerComponent

我想 setState 当用户点击按钮时将该值发送到 BannerComponent

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

Answer 1

在父级中保留状态并将状态设置函数发送到您的 Button。

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

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

Answer 2

在功能组件中，您可以在父组件中为 ButtonComponent 和 BannerComponent 创建状态。然后按照下面的例子做，

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

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

然后您可以在 ButtonComponent 中访问 setSampleState 作为 prop。

另外，看看这个 and you can use a state manager (Context API, Redux)

使用 onClick 将 state/props 发送到 React 中的另一个组件

Send state/props to another component in React with onClick

onclick

buttonclick

setstate

reactjs

react-props