Question

我不知道为什么：

我有react _ react-dom 16.8x
我在提供者和使用者之间有一个组件，以避免上述两个元素之间的循环调用。

我可以在生命周期组件中直接访问我的上下文，并且看到ReactJS提出了this.context的方法来做到这一点。

这是我的sandbox

这是我的reactjs代码段

import React, {Component}from "react"; 
import "./App.css";


// first we will make a new context
const MyContext = React.createContext();

// Then create a provider Component
class MyProvider extends Component {
  state = {
    name: 'Wes',
    age: 100,
    cool: true
  }
  render() {
    return (
      <MyContext.Provider value={{
        state: this.state,
        growAYearOlder: () => this.setState({
          age: this.state.age + 1
        })
      }}>
        {this.props.children}
      </MyContext.Provider>
    )
  }
}

const Family = (props) => (
  <div className="family">
    <Person />
  </div>
)

class Person extends Component {

  componentDidMount(){ 
    console.log("context: ", this.context)
  }
  render() {
    console.log("context: ", this.context)
    return (
      <div className="person">
        <MyContext.Consumer>
          {(context) => (
            <React.Fragment>
              <p>Age: {context.state.age}</p>
              <p>Name: {context.state.name}</p>
              <button onClick={context.growAYearOlder}></button>
            </React.Fragment>
          )}
        </MyContext.Consumer>
      </div>
    )
  }
}


class App extends Component {
  render() {
    return (
      <MyProvider>
        <div>
          <p>I am the app</p>
          <Family />
        </div>
      </MyProvider>
    );
  }
}


export default App;

为什么this.context为空？

任何提示都会很棒，谢谢

Answer 1

您需要设置contextType以使用上下文。

无论如何，在react website上都指定了相同的数字。

因此唯一需要进行的更改：

class Person extends Component {
  componentDidMount(){ 
    console.log("context: ", this.context)
  }
  render() {
    console.log("context: ", this.context)
    return (
      <div className="person">
        <MyContext.Consumer>
          {(context) => (
            <React.Fragment>
              <p>Age: {context.state.age}</p>
              <p>Name: {context.state.name}</p>
              <button onClick={context.growAYearOlder}></button>
            </React.Fragment>
          )}
        </MyContext.Consumer>
      </div>
    )
  }
}
Person.contextType = MyContext;

希望这会有所帮助！

Answer 2

如果您需要访问Traceback (most recent call last): File "manage.py", line 29, in <module> execute_from_command_line(sys.argv) File "/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/site-packages/django/core/management/__init__.py", line 364, in execute_from_command_line utility.execute() File "/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/site-packages/django/core/management/__init__.py", line 308, in execute settings.INSTALLED_APPS File "/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/site-packages/django/conf/__init__.py", line 56, in __getattr__ self._setup(name) File "/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/site-packages/django/conf/__init__.py", line 41, in _setup self._wrapped = Settings(settings_module) File "/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/site-packages/django/conf/__init__.py", line 110, in __init__ mod = importlib.import_module(self.SETTINGS_MODULE) File "/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/importlib/__init__.py", line 37, in import_module __import__(name) ImportError: No module named local中的MyContext，则可以将Person包装到使用者中，并在Person中进行渲染时传递context：

Family

“ this.context”返回一个空对象

2 个答案: