Как определить обработчик событий глобальной области видимости для рендеринга на стороне сервера React

По сравнению с рендерингом на стороне клиента, я предпочитаю использовать рендеринг на стороне сервера для приложения с небольшим взаимодействием с пользователем. А для компиляции кода на стороне сервера - веб-пакет.

Есть сценарий, который я хочу обновить marginTop таблицы после визуализации компонента. Если это рендеринг на стороне клиента, реализация будет перечислена следующим образом

componentDidMount() {
  const node = ReactDOM.findDOMNode(this.refs.table);
  node.style.marginTop = `-${height}`;
}

Однако в ssr компонент DidMount никогда не вызывается при визуализации компонента. Поэтому я поместил эти коды в componentWillMount и обновил исходный код следующим образом

document.addEventListener("DOMContentLoaded", function(event) {
  const node = document.getElementById('table');
  node.style.marginTop = `-${height}`;
});

тогда у него есть другая проблема.

document is not defined on server

Я знаю причину, потому что код работает в среде узла. нет такого разнообразия документов, как среда браузера. Я могу придумать, как поместить код в функцию renderPage, которая используется для визуализации компонента React в html-строку при рендеринге сервера на стороне сервера. Но если поместить обработчик события в контекст верхнего уровня, он будет загрязнять другую отображаемую страницу.

router.get('*', ctx => {
  match({ routes: routes, location: ctx.url }, (err, redirect, props) => {
    if (err) {
      ctx.throw(err.message, 500);
    } else if (redirect) {
      ctx.redirect(redirect.pathname + redirect.search)
    } else if (props) {
      const appHtml = renderToString(<RouterContext {...props}/>);
      ctx.body = renderPage(appHtml);
    } else {
      ctx.throw(404, 'not fount');
    }
  })
})
function renderPage(appHtml) {
  return `
    <!doctype html public="storage">
    <html>
    <meta charset=utf-8/>
    <title>My First React Router App</title>
    <div id=app>${appHtml}</div>
    <script type='text/javascript'>
      document.addEventListener("DOMContentLoaded", function(event) {
        const node = document.getElementById('table');
        node.style.marginTop = `-${height}`;
      });
    </script>
  `
}

Я также нашел другое разрешение. Компонент React для привязки событий в глобальной области., Я не думаю, что это лучшее разрешение.

Поэтому я хочу спросить, есть ли лучший способ манипулировать DOM-узлом, который обычно помещается в componentDidMount или componentDidUpdate, как рендеринг на стороне клиента.

Источник

1 ответ

Управлять DOM-узлом таким способом, как вы, бесполезно. React возьмет под свой контроль DOM, после того, как в следующий раз вы будете перерисовывать приложение, установленный вами запас будет переопределен React.

Я рекомендую вам использовать встроенный стиль, чтобы манипулировать любым стилем, который вам нравится.

render() {
  const divStyle={'marginTop': '100px'}

  return <div style={divStyle}></div>
}

Также позвольте функции рендера позаботиться о UI.

Есть ли какая-то причина, по которой вам нужно сбросить marginTop в жизненном цикле React, а не в функции рендеринга напрямую?

Источник
Другие вопросы по тегам