Question

我有一些路线，但是当点击某些路线时，react-dom不会重新渲染。以下是我的路线的样子：

  <Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="/about" component={About}/>
    <Route path="/chat" component={Chat}>
        <Route path="/chat/:chat_room" component={Chat_Room}/>
    </Route>
    <Route path="/login" component={Login}/>
  </Route>

这是我的/chat组件：

export default React.createClass({
  loadChatRoomsFromServer: function() {
    $.ajax({
      url: '/chat_rooms',
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState(data);
      }.bind(this),
      error: function(xhr, status, err) {
        console.error('/chat_rooms', status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function(){
      return {chat_rooms: []};
  },
  componentDidMount: function() {
      this.loadChatRoomsFromServer();
  },
  render: function() {
  var chat_nav_links = this.state.chat_rooms.map(function(rooms, i){
        return (
            <div key={i}>
              <li><NavLink to={"/chat/" + rooms.name}>{rooms.name}</NavLink></li>
            </div>
        );
    });
    return (
      <div>
          {chat_nav_links}
          {this.props.children}
        </div>
    );
  }
});

和我的/chat_room组件：

var ChatApp = React.createClass({

  getInitialState: function(){
      var chat_room = socket.subscribe(this.props.params.chat_room);
      var chat_room_channel = this.props.params.chat_room;
      chat_room.on('subscribeFail', function(err) {
        console.log('Failed to subscribe to '+chat_room_channel+' channel due to error: ' + err);
      });
      chat_room.watch(this.messageReceived);
      return {messages: []};
  },
  messageReceived: function(data){
      var messages = this.state.messages;
      var newMessages = messages.concat(data);
      this.setState({messages: newMessages});
  },

  render: function() {
    return (
      <div>
          <h2>{this.props.params.chat_room}</h2>
          <div className="container">
              <div className="messages">
                <MessagesList messages={this.state.messages}/>
              </div>
              <div className="actions">
                <ChatForm chat_room={this.props.params.chat_room}/>
              </div>
          </div>
      </div>
    )
  }
});

对于大量的代码感到抱歉，我来自Angular学习React并且我不完全确定哪些代码片段是相关的。所以忍受我。

问题是，假设我有3 chat_rooms排球，网球，足球。如果我点击足球首先它是完全正常并且工作完美，但是如果我点击网球链接，react-dom键不会改变，我仍然在足球频道说话。

现在我可以改变空间，但我必须转到/about，然后返回并点击/chat/tennis从足球转为网球。

我真的想远离使用Redux / Flux，因为我打算转移到MobX上，我假设我没有正确改变状态，所以它没有更新dom但是我一直坚持这个现在几天，我不清楚我做错了什么。谢谢！

Answer 1

当你点击一个新的聊天室链接时，ChatRoom组件仍然挂载：这里唯一改变的是聊天室ID，你的组件通过道具接收。

要使其正常工作，您只需在ChatRoom组件中设置一些组件的生命周期方法（有关组件＆生命周期方法的更多信息here）：

var ChatRoom = React.createClass({
    getInitialState: function() {  // sets initial state only
        return {messages: []};
    },

    componentDidMount: function() {  // sets-up subscription after 1st rendering
        this.subscribeToChatRoom(this.props.params.chat_room);
    },

    componentWillReceiveProps: function(nextProps) {  // when props change!
        if (nextProps.params.chat_room !== this.props.params.chat_room) {
            // reinits state for next rendering:
            this.setState({messages: []});
            // cleans-up previous subscription:
            this.unsubscribeToChatRoom(this.props.params.chat_room);
            // sets-up new subscription:
            this.subscribeToChatRoom(nextProps.params.chat_room);
        }
    },

    componentWillUnmount: function() {  // performs some clean-up when leaving
        this.unsubscribeToChatRoom(this.props.params.chat_room);
    },

    subscribeToChatRoom: function(chatRoomId) {
        var chat_room = socket.subscribe(chatRoomId);
        chat_room.on('subscribeFail', function(err) {
            console.log('Failed to subscribe to ' + chatRoomId
                + ' channel due to error: ' + err);
        });
        chat_room.watch(this.messageReceived);
    },

    unsubscribeToChatRoom: function(chatRoomId) {
        // socket un-subscription
    },

    messageReceived: function(data) {
        var messages = this.state.messages;
        var newMessages = messages.concat(data);
        this.setState({messages: newMessages});
    },

    render: function() {
        return (
            <div>
                <h2>{this.props.params.chat_room}</h2>
                <div className="container">
                    <div className="messages">
                        <MessagesList messages={this.state.messages} />
                    </div>
                    <div className="actions">
                        <ChatForm chat_room={this.props.params.chat_room} />
                    </div>
                </div>
            </div>
        )
    }
});

Answer 2

您是否从observer导入mobx-react功能了吗？要使组件成为MobX，应按如下方式声明：var ChatApp = observer(React.createClass({ ...

单击新链接时，React-Router不会重新呈现

2 个答案: