有没有办法在React中添加一个全局微调器？

Question

我们正在使用React和React-Router来开发前端UI。在我们的一些页面中，我们将显示一个微调器。在我们当前的解决方案中，我们必须为每个页面添加一个Spinner组件，然后根据需要显示它。

我们有什么办法可以在每个页面中添加一个全局Spinner并调用一个方法来显示或隐藏它吗？

我认为Mixins可能是解决方案，但我不确定正确的方法。

Answer 1

我会将spinner ressource链接保存在conf文件中，渲染我的所有组件通过url传递url。

因此，当我决定更换微调器时，我只需更改conf文件中的链接。

mixin可行，但我不确定分享一个道具是最好的事情

修改：     var conf = require（“myconfmodule”）;

在您的父组件渲染功能中：

render: function() {
    <SomeComponent spinnerUrl={conf.spinnerUrl} />
}

在您的子组件中：

  getInitialState: function() {
        return { isLoaded : false; };
    }
    render: function() {
        { !this.state.isLoaded ?
            <img src={this.props.spinnerUrl} />
        : <LoadThePage/>}
    }

    componentDidMount: function() {
        // some listener, is my page load ? then this.setState({
        // isLoaded: true });
    }

我正在考虑这样的事情，让我知道它是否更清楚。