javascript - 在反应组件中导出方法

Question

要求是创建其方法可以被其他组件访问的组件，以便通过其他组件我们可以提供警报消息。（像烤面包机）

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

1. statics - React.createClass 或 es6 类中的静态。

2. 使用组件的 ref。

但是实现这一目标的最佳方法是什么？

Answer 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 之类的东西。