Question

    import {
    ImageBackground
} from 'react-native';

export const CustomContext = React.createContext(1);
export default class MainBackGround extends React.Component {
    state ={
        lang:'en'
    }
    render() {
        return (
            <CustomContext.Provider value={this.state.lang}>
                <ImageBackground>
                    { this.props.children } 
                </ImageBackground>
            </CustomContext.Provider>
        )
    }
}

子组件

import MainBackground, {CustomContext} from '../components/MainBackground';
export default class MyChildComponent extends React.Component {

    render() {
        return (
                <CustomContext.Consumer>
                { value => (
                <ScrollView >               
                    <Text>{value}</Text>
                </ScrollView>
                )}
                </CustomContext.Consumer>
        );
    }
}

如何将状态a传递给所有孩子？

我只是将代码更新为更接近我的真实代码

问题是我得到的是1而不是en的价值（显示为1而不是en）

Answer 1

context API可能就是您想要的。它旨在在许多通常深度嵌套的组件之间共享数据。这提供了一种替代道具钻孔的方法。

这无需您钻取道具，因此在我的示例中，我通过创建react上下文替换了您的state字段。

请注意，这的确会在组件之间建立耦合，因此可能导致组件难以重用。

下面未经测试的示例。

import React from "react";

// Create a context, you'd probably place this in a /contexts
// folder, i.e. not in the component file itself.

//Note we're passing in a default value, I took 1 from your
// state field.
export const CustomContext = React.createContext(1);

export default class MainBackGround extends React.Component {

    render() {

        // All children can have access to the context variable,
        // by utilising CustomContext.Consumer. 

        // Note, you can override the default value of 1
        // and pass a 'value' prop to the CustomContext.Provider
        // below, e.g. <CustomContext.Provider value={5}>
        return (
            <CustomContext.Provider>
                { this.props.children } 
            </CustomContext.Provider>
        )
    }
}

然后在您的一个孩子中

import React from "react";
import {Text} from "react-native";

// This is the context created in the above example.
import CustomContext from "./where you saved it.";

export default class SomeChildComponent extends React.Component {

    render () {
        // '1' will be rendered in the Text element
        // as 1 was given as the default value of the context.  
        return (
            <CustomContext.Consumer>
                {value => (
                    <Text>
                        {value}
                    </Text>
                )}
            </CustomContext.Consumer>
        );
    }
}

请注意，这当然比以前的答案便宜，如果您有很多孩子，这可能特别有用。即您不会克隆每个孩子。

我给出的示例非常简单，它利用了您提供给上下文API的默认值。您可以更改在上下文提供程序中定义的值。

例如

export const CustomContext = React.createContext(1);

export default class MainBackGround extends React.Component {

    render() {
        return (
            <CustomContext.Provider value={5}>
                { this.props.children } 
            </CustomContext.Provider>
        )
    }
}

这将在我的原始示例中在子组件中打印5，即我们在创建新上下文时不依赖于给定的默认值。

简而言之，第一个示例省略了可以传递给Context.Provider元素的“值”属性，因为这是可选的，所以在此实例中将提供默认值。

替代

作为替代方案，我建议使用类似Redux的状态管理库。

Answer 2

我为您的问题提供了三种解决方法：-

1）使用渲染道具图案

2）使用React.cloneElement

3）使用React.Context API

这里是code sandbox link，其中使用了所有三种方法。使用适合您需要的任何东西。

希望有帮助！

对本地人做出反应，如何将状态传递给所有孩子

2 个答案: