在反应组件中导出方法

时间:2017-12-14 12:49:41

标签: javascript reactjs es6-class react-props react-codemirror

要求是创建其方法可以被其他组件访问的组件,以便通过其他组件我们可以提供警报按摩。 (像烤面包机)

我知道我们可以通过以下方法来做到这一点:

  1. 静态 - 在es6类中使用React.createClass或static。

  2. 使用组件的参考。

  3. 但实现这一目标的最佳方法是什么?

1 个答案:

答案 0 :(得分:1)

这看起来非常时髦,并且不会遵循数据下行动作React方法。

您可以改为使用渲染道具:

// App.jsx
<AlertProvider>
  {sendAlert => <Consumer onAlert={sendAlert} />}
</AlertProvider>


// AlertProvider.jsx
export default class AlertProvider extends React.Component {
  sendAlert(msg) { alert(msg); }
  render() {
    return this.props.children(this.sendAlert);
  }
}


// Consumer.jsx
export default function Consumer({ onAlert }) {
  return <button onClick={() => onAlert('Boom!')} />
}

如果您需要全局可用,请考虑使用类似Redux的内容。