1

我在这里使用 Isomoprhic React Starter 工具包项目构建一个同构反应应用程序：https ://github.com/kriasoft/react-starter-kit

但是我遇到了一个神秘的警告，我还没有弄清楚如何解决问题。

React 似乎可以在我的浏览器中很好地渲染代码，但显然在服务器上渲染存在一些问题。

这是我得到的警告：

warning.js:45Warning：React 尝试在容器中重用标记，但校验和无效。这通常意味着您正在使用服务器渲染，并且在服务器上生成的标记不是客户端所期望的。React 注入了新的标记来补偿哪些工作，但是您已经失去了服务器渲染的许多好处。相反，找出为什么生成的标记在客户端或服务器上是不同的：

这是我的组件中的代码，它是问题的根源： 

class TestPage extends React.Component {
  constructor () {
    super()
    this.state = { n: 0 }
  }

  static contextTypes = {
    onSetTitle: PropTypes.func.isRequired
  };

  static defaultProps = {
    blahblah: 'blah'
  }

  render() {
    let title = 'Test Page';
    this.context.onSetTitle(title);
    return (
      <div className="page">
        <div className="pageContainer">
          <h1>{title}</h1>
            {this.state.n}
          <TestComponent blahblah={this.props.blahblah} />
        </div>
      </div>
    );
  }
}
4

0 回答 0