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

React.js does not differentiate between two components of same class

本文关键字：一类 组件 两个 不区 js React      更新时间：2023-09-26

不确定这是React.js错误还是Javascript语言的"特性"。我有一个名为Page的React.js（编辑：使用v0.12.x）组件，它充当路由器并根据路由选择子组件。我创建了一个mixin，它添加了一个名为runRoute的函数，该函数采用JSX组件，并使用Page的setState方法来更新state.routeComponent。此外，runRoute还调用forceUpdate()以确保Page被重新渲染。

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

我有两个子组件，称为Board和Profile。CCD_ 11被重新用于不同的上下文。如果两个连续的路由都使用<Board/>，React.js不会更新UI。只有当使用不同类（如<Profile/>）的连续路由时，UI才会真正更新。如果状态改变为另一个以不同方式使用<Board/>的路由，则它将仅将UI更新为<Board/>的适当状态。

下面是<Page/>和我的Router mixin:的一些示例代码

Router.js

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(); 
    }
  };
}

Page.jsx

module.exports = function(React, Router, NotFound, Profile, Board) {
  return React.createClass({
    mixins: [Router],
    routes: {
      '/board': 'trending',
      '/board/mostloved': 'mostLoved',
      '/profile': 'profile'
    },
    trending: function() {
      this.runRoute(
        <Board title="Trending Boards" setTitle={this.props.setTitle} />
      );
    },
    mostLoved: function() {
      this.runRoute(
        <Board title="Loved Boards" setTitle={this.props.setTitle} />
      );
    },
    profile: function() {
      this.runRoute(
        <Profile setTitle={this.props.setTitle} />
      );
    },
    notFound: function () {
      this.runRoute(
        <NotFound setTitle={this.props.setTitle} />
      );
    },
    render: function() {
      return this.state.routeComponent;
    }
  });
};

如果有人对此有所了解，请不胜感激。谢谢

如果不查看Board组件，就不能确定，但问题似乎是它的状态取决于属性，并且在更新属性时（在runRoute之后）无法保持它们同步。

这里有一个简单的例子（jsfiddle）来演示这个问题：

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的状态，但不会更改Board的视觉表示。

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

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

  componentWillReceiveProps: function(props) {
    this.setState({title: props.title})
  },

附带说明：您永远不需要this.setState()之后立即使用this.forceUpdate()。如果没有它就无法获得所需的行为，那就是你做错了什么。

相关文章：