Question

我对Context API的工作方式有些困惑

如文档所述，关于Context Provider：

接受一个值属性，该值将传递给此提供程序的后代的使用组件。一个提供商可以连接到许多消费者。可以嵌套提供程序以覆盖树中更深的值。

我只是开始尝试这样的简单代码：

//App.js

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.changeColor=(color, value)=>{
      this.setState({[color]:value})
    }
    this.state={
      changeColor:this.changeColor,
      red:0,
      green:0,
      blue:0,
    }
  }

  render() {
    console.disableYellowBox = true;
    return (
      <ThemeContext.Provider value={this.state}>
        <InitialScreen/>
      </ThemeContext.Provider>
    );
  }
}

//InitialScreen.js

export default class Login extends Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {({red, green, blue, changeColor})=>(
          <View style={{flex:1}}>
            <View style={{flexDirection:'row', justifyContent:'space-between'}}>
              <Text>Red: </Text>
              <Slider
                style={{width:'80%'}}
                minimumValue={0}
                maximumValue={255}
                step={1}
                value={red}
                onValueChange={(e)=>{changeColor('red', e)}}
              />
            </View>
            <View style={{flexDirection:'row', justifyContent:'space-between'}}>
              <Text>Green: </Text>
              <Slider
                style={{width:'80%'}}
                minimumValue={0}
                maximumValue={255}
                step={1}
                value={green}
                onValueChange={(e)=>{changeColor('green', e)}}
              />
            </View>
            <View style={{flexDirection:'row', justifyContent:'space-between'}}>
              <Text>Blue: </Text>
              <Slider
                style={{width:'80%'}}
                minimumValue={0}
                maximumValue={255}
                step={1}
                value={blue}
                onValueChange={(e)=>{changeColor('blue', e)}}
              />
            </View>
            <View style={[GlobalStyles.Center, {flex:1, backgroundColor:'rgb('+red+', '+green+', '+blue+')'}]}>
            </View>
          </View>
        )}
      </ThemeContext.Consumer>
    );
  }
}

//themeContext.js

import React from 'react';

export const themes = {
  light: {
    foreground: '#000000',
    background: '#eeeeee',
  },
  dark: {
    foreground: '#ffffff',
    background: '#222222',
  },
};

export const ThemeContext = React.createContext({
  theme: themes.dark,
  toggleTheme: () => {},
})

我不知道Object中React.createContext({...})的含义，我可以在this.state中传递Provider value props，这意味着我不需要在{中定义任何内容{1}} AFAIK，

还是我做错了什么，所以我不使用React.createContext({...})函数本身？

Answer 1

绝对正确，您无需在React.createContext中提供任何内容即可使用它。您在createContext中提供的数据仅是默认值，并且在以后设置Context.Provider时将被覆盖。但是，由于以下原因，我强烈建议您始终提供默认值：

通过这样做，您可以提前考虑上下文将服务于哪种数据，从而帮助您更好地理解代码的结构。这种习惯从长远来看会帮助您
它为您使用的任何IDE（例如Visual Studio）提供了上下文数据的线索，并在您编写代码时提供了更好的提示

在React Native中有关Context API的完整说明

1 个答案: