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

Question

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

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

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

Answer 1

我会将微调器资源 link 保存在一个 conf 文件中，渲染我的所有组件通过 url 通过 props。

因此，当我决定更换另一个微调器时，我只需要更改 conf 文件中的 link。

mixin 可以工作，但我不确定这是否是仅共享 prop 的最佳选择

编辑： 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 });
    }

我在想类似的事情，如果更清楚的话请告诉我。

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

Is there any way add a global spinner in React?

reactjs

react-router