要求是创建其他组件可以访问其方法的组件,以便通过其他组件我们可以发出警报消息。 (如 toastr )
我知道我们可以通过以下方法做到这一点:
statics - React.createClass 或 es6 类中的 static。
使用组件的 ref。
但是实现这一目标的最佳方法是什么?
最佳答案
这看起来非常时髦,并且不遵循 data-down actions-up React 方法。
您可以使用渲染 Prop 来代替:
// 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 之类的东西。
关于javascript - 在React组件中导出方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47813814/