將來自React上下文提供者的狀態放在const中

Question

我正在從我的應用程序提供程序接收狀態，但是我需要在const或子組件狀態下使用該狀態。 但是我找不到辦法。

例如，我想要這樣的東西：

const admin =  <MyContext.Consumer>{() => 
                this.setState({username: (context => 
                context.state.name)})}
               </MyContext.Consumer>;

要么：

const admin = <MyContext.Consumer>{(context) => context.state.name}</MyContext.Consumer>

admin將包含狀態名稱的值。

我知道我的方法行不通，但是我應該采用哪種方法來做這樣的事情？

Answer 1

<MyContext.Consumer>只能在渲染中使用，並且它提供的值只能在傳遞給它的<MyContext.Consumer>中訪問。 如果您需要訪問它的其他生命周期掛鈎，例如用它調用setState，則有幾個選項。 如果您正在使用React 16.6（我寫的是最新版本），則可以使用靜態contextType （請注意，它是單數的contextType，而不是contextTypes復數）

export class MyComponent extends Component {
  static contextType = MyContext;

  componentDidMount() {
    // value is available on this.context, so you can do things like:
    this.setState({ username: this.context.state.name });
  }
}

在React 16.6之前，您可以將組件包裝在另一個組件中，然后通過主要組件上的prop與值進行交互：

export const MyComponent = props => (
  <MyContext.Consumer>
    {context => <InnerComponent someExtraProp={context} {...props} />}
  </MyContext.Consumer>
);

class InnerComponent extends Component {
  componentDidMount() {
    this.setState({
      username: this.props.someExtraProp.state.name,
    });
  }
}