代码之家 › 专栏 › 技术社区 › Webwoman

“this.context”返回空对象

reactjs javascript

Webwoman · 技术社区 · 6 年前

我不明白为什么:

我有React uuuReact 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;

为什么? 语境 是空的吗?

任何暗示都很好, 谢谢

2 回复 | 直到 6 年前

Joshua Steele 6 年前

您需要设置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;

希望这有帮助!

helloitsjoe 6 年前

如果您需要访问 MyContext 在里面 Person 你可以包装 人 在消费者中传递 context 当你呈现它的时候 Family :

const Family = (props) => (
  <div className="family">
    <MyContext.Consumer>
      {(context) => {
        <Person context={context} />
      }}
    </MyContext.Consumer>
  </div>
)


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