javascript - 检查是否加载了样式表然后渲染元素

Question

我正在使用 react、redux、react-router 和 react-helmet 开发通用反应应用程序。我的应用程序中的每个页面都有单独的样式表。当客户端的路由发生变化时，起初，元素还没有样式。几毫秒后，我的页面变得丑陋了！我想要解决这个问题。我怎么知道样式表何时加载？

我的容器组件：

render() {
        return (
            <div>
                <Helmet>
                    <title>MyTitle</title>
                    <link rel="stylesheet" href="../search-page.css"/>
                </Helmet>
                <div id="container"">
                   <MyComponents />
                </div>
            </div>
        )
    }

Answer 1

尚未对其进行测试，但我认为您可以onLoad为您的标签注册一个侦听器，该侦听器<link />将设置状态标志，触发组件的呈现。

class MyComponent extends Component {
  state = { loaded: false };
  onLoad = () => this.setState({ loaded: true });
  render() {
    return (
      <div>
        <Helmet>
          <title>MyTitle</title>
          <link rel="stylesheet" href="../search-page.css" onLoad={this.onLoad} />
        </Helmet>
        {this.state.loaded && 
          <div id="container">
            <MyComponents />
          </div>
        }
      </div>
    );
  }
}

编辑：因为看起来<link />标签的 onLoad 钩子没有触发，不同的方法可能是这样的：

class MyComponent extends Component {
  state = { loaded: false };
  componentDidMount() {
    const sheet = document.createElement('link');
    sheet.rel = 'stylesheet';
    rel.addEventListener('load', this.onLoad);
    rel.href = '../search-page.css';
  }
  onLoad = () => this.setState({ loaded: true });
  render() { /* as before */ }
}