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>仅可用于渲染，并且其提供的值只能在传递给它的子函数中访问。如果您需要访问它的其他生命周期挂钩，例如用它调用setState，则有几个选项。如果您使用的是React 16.6（我写的是最新版本），则可以使用static 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,
    });
  }
}

将来自React上下文提供程序的状态放在const

1 个答案: