时间戳

首页 > 解决方案 > 如何在两个兄弟组件 React 之间传递值和运行函数

react-native - 如何在两个兄弟组件 React 之间传递值和运行函数

问题描述

在此处输入图像描述

如何在两个兄弟组件之间传递值和运行函数。我正在使用 React ， Hooks

项目列表存在于 CreateArea.jsx 组件中，我想从中删除一个项目。Note.jsx 组件中存在删除按钮

标签： react-native

解决方案

有很多方法可以做到这一点。但如果应用程序不太复杂，我发现 Context API 可以很好地工作。它是一个简单的过程：

  1. 配置提供程序
  2. 配置消费者和读/写数据

配置提供程序

//App.js
const [data, setData] = useState()

let contextValue = {
    data: data,
    handleChange: (d) => setData(d)
}

return (
    <RootContext.Provider value ={contextValue}>
        <AppContainer/>
    </RootContext.Provider>
)

配置消费者

//SomeComponent.js - you can use consumer in any number of components
return(
    <RootContext.Consumer>
        {(handleChange, data) => {
            handleChange({key: value})
            <Text>{JSON.stringify(data)}</Text>
        }}
    </RootContext.Consumer>
)

更多信息可以在这里找到

推荐阅读