Question

当使用react-router和Radium进行服务器端渲染时，我收到以下警告，该警告似乎来自Radium在客户端上附加css前缀但不在服务器上。

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) 8.$=10"><div style="-webkit-transition:b
(server) 8.$=10"><div style="transition:backgroun

我尝试在服务器端渲染代码中包含radiumConfig，如下所示，但它似乎没有帮助。你有什么建议吗？

  match({ routes, location }, (error, redirectLocation, renderProps) => {
    if (redirectLocation)
      res.redirect(301, redirectLocation.pathname + redirectLocation.search)
    else if (error)
      res.status(500).send(error.message)
    else if (renderProps == null)
      res.status(404).send('Not found')
    else
      content = ReactDomServer.renderToString(<RoutingContext {...renderProps} radiumConfig={{userAgent: req.headers['user-agent']}} />);
      markup = Iso.render(content, alt.flush());
  });

我的路线如下所示，其中App组件由Radium包裹：

export default (
  <Route path="/" component={App}>
    <Route path="login" component={Login} />
    <Route path="logout" component={Logout} />
    <Route name="test" path="test" component={Test} />        
    <Route name="import" path="import" component={ImportPlaylist} />
    <Route name="player" path="/:playlist" component={Player} />
  </Route>
);

Answer 1

这是一个有效的解决方案。我需要根据Github上的@joshparolin的建议创建一个Wrapper组件。

Wrapper.jsx：

import React from 'react';
import Radium from 'radium';

@Radium
export default class Wrapper extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
};

Server.jsx：

content = ReactDomServer.renderToString(<Wrapper radiumConfig={{userAgent: req.headers['user-agent']}}><RoutingContext {...renderProps} /></Wrapper>);
markup = Iso.render(content, alt.flush());

Client.jsx：

Iso.bootstrap((state, _, container) => {
  alt.bootstrap(state);
  ReactDOM.render(<Wrapper><Router history={createBrowserHistory()} children={routes} /></Wrapper>, container);
});

react-router，radium和服务器端呈现 - 警告：反应校验和无效

1 个答案: