如何在嵌套组件中传递数据？

Question

我想知道如何在嵌套组件中传递数据。 我正在使用使用react-native和react-redux，redux-thunk，redux-persist的应用程序。

基于我对redux概念的了解，即使它由嵌套组件组成，也可以从存储中获取或更新状态。 但是，我这样做只是将数据作为道具从父组件传递到子组件。 我猜这不是redux的正确用法，因为深度越深，我调用父组件函数的次数就越多。 听起来很怪吧？ 如果您看到我的代码，那么您将理解我在说什么。

这是我的代码。

已更新 例如，代码结构就像下面这样。 如果要在grandChild组件中调用操作，是否应该转到父组件？

parent.js

...

getData = async () => {
    await Actions.func();
}

render() {
    return (
        <Parent>
            <Child data={data} getData={this.getData}/>
        </Parent>
    );
}

---

child.js

...
childFunc(){
    this.props.getData();
}

<Child>
    <GrandChild grandChildFunc={this.childFunc}/>
</Child>

---

GrandChild.js

...
componentDidMount() {
    this.props.childFunc();
}

render() {
    return (
        <View>
            <Text>Example</Text>
        <View>
    );
}

我想弄清楚redux原因是reducer现在被调用了两次，但是我不知道这里会发生什么。

如果您有任何建议，对我会有所帮助。 谢谢！

Answer 1

我不确定正确的方法。但是我正在处理组件：

• 重用UI，对不同数据动态->纯组件。从父级传递props
• 仅用于1个逻辑/数据->组件。连接到商店

Answer 2

哪个函数被触发两次？请根据您的代码更具体，之后社区会更有用。我认为，如果将箭头功能与常规功能混合使用，则可能会触发任何不需要的功能。请记住，第一次安装组件时，React Lifecycle两次调用render方法。

在您的grandChild组件中，成功渲染组件后，可以调用childFunc（）。也许在您的子组件中，您是在不知道的情况下第一次调用该函数。因此请更加具体，并显示出您遇到问题的代码的确切部分。