React.js,this.context被弃用

时间:2018-11-20 06:18:35

标签: reactjs

在16.3.0中引入的React中切换到新的Context API之后,即使官方文档告诉您使用以下方式,也已弃用this.context:

 class MyClass extends React.Component {
  componentDidMount() {
    let value = this.context;
    /* perform a side-effect at mount using the value of MyContext */
  }
  componentDidUpdate() {
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.context;
    /* ... */
  }
  render() {
    let value = this.context;
    /* render something based on the value of MyContext */
  }
}
MyClass.contextType = MyContext;

2 个答案:

答案 0 :(得分:0)

在版本16.3.0之前和版本16.6.0之前支持使用您在案例中使用的上下文API。

API在16.3.0到16.6.0之间进行了一些更改,您需要使用Consumer渲染道具模式,但后来进行了改进以支持contextType模式,以允许在生命周期方法中使用Context

如果您使用的是上述API,请确保您使用的React版本高于16.6.0

如果您使用的版本介于16.3.0到16.6.0之间,请使用Context之类的

class MyClass extends React.Component {
  componentDidMount() {
    let value = this.props.context;
    /* perform a side-effect at mount using the value of MyContext */
  }
  componentDidUpdate() {
    let value = this.props.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.props.context;
    /* ... */
  }
  render() {
    let value = this.props.context;
    /* render something based on the value of MyContext */
  }
}

export default (props) => (
   <MyContext.Consumer>
        {(context) => <MyClass {...props} context={context}/>}
   </MyContext.Consumer>
)

答案 1 :(得分:0)

或使用带有钩子useContext的功能包装器:

export const withMyContext = WrappedComponent => props => {
  const myContext = useContext(MyContext)
  return <WrappedComponent myContext={myContext} {...props} />
}