Проверьте, загружена ли таблица стилей, затем визуализируйте элементы

Question

Я разрабатываю универсальное приложение "Реакция", используя "Реакция", "Редукс", "Реакция-маршрутизатор" и "Реакт-шлем". Каждая страница в моем приложении имеет отдельную таблицу стилей. Когда маршруты изменяются на стороне клиента, сначала элементы не имеют стиля. и на несколько миллисекунд моя страница становится ужасной! Я хочу решение этой проблемы. Как я могу узнать, когда загружена таблица стилей?

Мой контейнерный компонент:

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>
    );
  }
}

Изменить: так как он выглядит как крючок onLoad для <link /> теги не срабатывают, другой подход может быть примерно таким:

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