Question

不确定这是否是React.js错误或＆＃34;功能＆＃34;的Javascript语言。我有一个名为Page的React.js（ edit：using v0.12.x ）组件，它充当路由器并根据路由选择子组件。我创建了一个mixin，它添加了一个名为runRoute的函数，它接受一个JSX组件并使用Page的{{1}}方法更新setState。此外，state.routeComponent还会调用runRoute以确保重新呈现forceUpdate()。

问题是，当它们属于同一个类时，React不会区分状态中的两个组件。我会解释一下。

我有两个名为Page和Board的子组件。 Profile被重用于不同的上下文。如果运行两个使用Board的连续路由，则React.js不会更新UI。仅当使用不同类的连续路由（例如<Board/>）实际更新UI时才会这样做。如果状态更改为使用<Profile/>的另一条路线，则只会将UI更新为适当的<Board/>状态。

以下是<Board/>和<Page/>混音下面的示例代码：

Router.js

Router

Page.jsx

module.exports = function(){
  return {

    getInitialState: function () {
      return {
        routeComponent: null
      };
    },

    runRoute: function(component){
      this.setState({routeComponent: component});
      this.forceUpdate();
    },

    componentWillMount: function() {
      var self = this;
      self.router = Router(self.routes).configure({
        resource: self, 
        notFound: self.notFound
      });
      self.router.init(); 
    }
  };
}

感谢是否有人对此有所了解。谢谢！

Answer 1

如果没有查看Board组件，不能肯定地说，但看起来问题是它的状态依赖于属性，并且在更新属性时不会使它们保持同步（在{{之后） 1}}）。

以下是演示此问题的简单示例（jsfiddle）：

runRoute

点击链接会更改var Board = React.createClass({ getInitialState: function() { return {title: this.props.title} }, render: function() { return <h1>{this.state.title}</h1> } }); var Page = React.createClass({ getInitialState: function () { return {routeComponent: null} }, handleClick: function(title) { var self = this; return function() { self.setState({ routeComponent: <Board title={title} /> }) } }, render: function() { return <div> <a href='#' onClick={this.handleClick('Trending')}>Trending</a> <br/> <a href='#' onClick={this.handleClick('Most Loved')}>Most Loved</a> {this.state.routeComponent} </div>; } });的状态，但不会更改Page的直观表示。

您需要通过处理componentWillReceiveProps中的更改，使Board的状态与其更新的属性保持同步。

只需向Board添加几行即可解决问题：

Board

作为旁注：componentWillReceiveProps: function(props) { this.setState({title: props.title}) },之后您永远不需要this.forceUpdate()。如果没有它就无法获得所需的行为，那么你做错了。

React.js不区分同一类的两个组件

1 个答案: