代码之家 › 专栏 › 技术社区 › angry kiwi

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

react-native reactjs

angry kiwi · 技术社区 · 6 年前

    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)

3 回复 | 直到 6 年前

Lee Brindley 6 年前

这个 context API 可能就是你要找的。它的设计目的是在许多通常嵌套很深的组件之间共享数据。这为支撑钻井提供了一种替代方案。

这样就不需要深入了解道具,所以在我的示例中,我用创建react上下文替换了状态字段。

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

下面是一个未经测试的例子。

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,也就是说,在创建新上下文时,我们不依赖给定的默认值。

简而言之,第一个例子省略了“value”选项可以转到上下文。Provider元素,因为这是可选的,所以在这个实例中会提供默认值。

可供替代的

作为替代方案,我会建议像这样的州管理图书馆 Redux .

tarzen chugh 6 年前

我认为有三种方法可以解决你的问题:-

1) 使用渲染道具模式

2) 使用 React.cloneElement

3) 使用React。上下文API

这是答案 code sandbox link 使用这三种方法。选择适合你需要的。

希望有帮助!!!