javascript - 重新渲染 ReactJS 组件会挂起浏览器

Question

我一直在尝试使用 ReactJS 创建基于组件的 UI，而不是我通常采用的一百万个全局函数、变量和不可重用标记的草率方法。到目前为止，我真的很喜欢 React，但我遇到了一个绊脚石。

考虑以下组件布局

EventView
  EventViewSidebar
    EventViewList
      EventViewListRow
  EventViewDetail

在此布局中，每个唯一键均出现多次 EventViewListRow。单击 EventViewListRow 的实例应使用该项目的详细信息更新 EventViewDetail。

这是顶级 EventView 组件的 render 函数:

render: function () {
    return (
      <div className="event-view row-fluid">

          <div className="event-view__sidebar col-md-4">
            <EventViewSidebar projectId={this.state.projectId} />
          </div>

          <div className="event-view__content col-md-8" id="eventDetail">

          </div>

      </div>
    );
}

这是 EventViewDetail 组件

var EventViewDetail = React.createClass({

    getInitialState: function () {
        return { eventId: 0 };
    },

    render: function () {
        if (this.state.eventId === 0) {
            return (<h3>Nothing selected</h3>);
        }
        else {
            return (
          <div>
              {this.state.eventId}
          </div>
          );
        }
    }
});

为了在单击 EventViewListRow 时更新 EventViewDetail，我在 EventViewListRow 中定义了以下事件处理程序

handleClick: function (event) {

    event.preventDefault();

    React.render(
            React.createElement(EventViewDetail, { eventId: this.props.id }),
              document.getElementById("eventDetail")
            ).setState({ eventId: this.props.id });

},

这一切似乎都工作正常(除了我必须在上面添加的 setState 调用之外，否则单击不同的 EventViewListRow 似乎没有任何效果 - 毫无疑问这是我的第一个问题)。实际的关键问题是，如果我将默认 html 添加到 EventView 中定义的 eventDetail div，那么当我单击 EventViewListRow 中的链接时，以下消息显示在控制台中，浏览器挂起。

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:

(client) <h3 data-reactid=".0">Nothing selected

(server) <h3 data-reactid=".0.1.0">Select an even

浏览器选项卡 (Chrome 43) 挂起后，我必须使用任务管理器终止它。

最初，我是直接调用 EventViewDetail 的实例，例如

          <div className="event-view__content col-md-8" id="eventDetail">
            <EventViewDetail />
          </div>

但如果我只使用 vanilla HTML，它也会挂起

          <div className="event-view__content col-md-8" id="eventDetail">
            <h3>Select an event to view</h3>
          </div>

显然我做错了什么，但我对 React 有点陌生，所以我不知道那是什么。我读到我应该在顶级 EventView 组件上有状态，但我无权访问它并且 React 似乎没有提供返回组件链的能力.除非您应该将 EventView 实例作为属性传递给每个子组件？

哦，我还应该补充 - 我还尝试从 EventViewListRow 单击处理程序中删除 setState 调用，以防这是原因，但它没有效果。

任何人都可以就我做错了什么提供任何建议。 EventView 是否应该具有子组件的所有状态，如果是，我如何从嵌套的子组件引用父组件 - 我是否必须传递 EventView 的实例作为每个 child 的支柱？

抱歉，如果这些是白痴问题!

Answer 1

你不应该在 handleClick 函数中调用 React.render。只需调用 this.setState，React 就会自动再次渲染。