从components函数调用react context prop(函数)

openToast 需要提供给 upVote 作为一个论点(另一个答案已经提到了), 上票 变为高阶函数:

upVote = openToast => () => {
  // ...
  openToast();
}

用得像:

<span onClick={this.upVote(openToast)}>

避免上下文使用者如此复杂的一种方法是在类实例中提供上下文。这可以用 contextType :

static contextType = ToastContext;

upVote = openToast => () => {
  // ...
  this.context.openToast();
}

缺点是这样会限制组件与一个上下文一起使用。

或者可以将上下文提供给具有hoc的组件:

const withToast = Comp => props => (
    <ToastConsumer>
      {({ openToast }) => <Comp openToast={openToast} ...props/>}
    </ToastConsumer>
);

然后连接到上下文的组件 withToast(MyComponent) 接收 旋耕机 作为道具:

upVote = openToast => () => {
  // ...
  this.props.openToast();
}

实现这一目标的一个方法是通过 openToast 新处理程序中的函数。您可以通过包装 onClick 在函数中,或通过 upVote 功能。

实例:

包装在函数中:

upVote = (openToast) => {

onClick={() => this.upVote(openToast)}

咖喱 上票 :

upVote = (openToast) => () => {

onClick={this.upVote(openToast)}