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 */ }
}

检查样式表是否已加载然后渲染元素

1 个答案: