Reactjs, this.context устарел

После перехода к новому API контекста в React, представленном в 16.3.0, 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;

Ответы

Ответ 1

Использование контекстного API, как вы использовали в вашем случае, поддерживается до версии 16.3.0 и после 16.6.0.

API немного изменился с 16.3.0 на 16.6.0, где вам нужно использовать шаблон поддержки Consumer render, но позже он был усовершенствован для поддержки шаблона 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>
)

Ответ 2

Или используйте функциональную обертку с крючком useContext:

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