Question

我正在使用Isomoprhic React Starter套件项目构建一个Isomorphic react应用程序：https://github.com/kriasoft/react-starter-kit

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

React似乎在我的浏览器中呈现代码正常，但显然在服务器上呈现存在一些问题。

以下是我收到的警告：

warning.js：45警告：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>
    );
  }
}

如何麻烦拍摄并修复React.js校验和无效警告

0 个答案: