在 Reactjs 中初始加载后，您将如何基于 ajax 查询创建新元素？

Question

我刚开始使用 React.js。从理论上讲，它看起来很整洁，但我不得不重新考虑如何解决我习惯用 jQuery 解决的简单问题。其中之一是如何在基于用户输入的初始加载后动态生成组件。

假设我有一个 <SearchBox />，我希望用户能够输入查询，单击搜索，并根据结果生成任意数量的 <SearchResult /> 组件ajax 个电话。我假设我会创建一个附加到 SearchBox 的更新方法，调用 onClick 来获取数据，但是一旦数据到达，我将如何在每次搜索后动态呈现 SearchResult 组件？

我想我正在寻找与 Angular 的 ng-repeat 指令类似的东西，但我在 React 中没有看到任何类似的效果。

Answer 1

我可能是错的，但我认为它可以像这样简单：

...
render: function() {
  var length = data.length; // data contains the result you received from AJAX
  var searchResultObjects = [];
  for (var i = 0; i < length; i += 1) {
    searchResultObjects[searchResultObjects.length] = <SearchResult />;
  }
  return (
    <ul>
      {searchResultObjects} // assuming that your SearchResult object returns an <li> item from its render function 
    </ul>
  );
}
...

here就是一个例子。

更新：

看看这个updated fiddle以更新结果为例，观察consolewindow中的事件浏览器的开发者工具。希望这能澄清。

Answer 2

制作列表最简单的方法是将搜索结果映射到 React 组件并将数据添加到 prop。

render: function() {
    var searchResultItems = this.state.searchResults.map(function(object, index) {
        return <SearchResult key={index} data={object} /> // Mapping each item to a React component with the results in a data prop 
    });

    return (
        <div>
            <SearchBox />
            <ul>
                {searchResultItems}
            </ul>
        </div>
    );
}

确保始终添加一个键，以便 React 可以轻松区分每个项目。您可以将搜索结果保持在状态中，并在新搜索后使用 setState 更新它，它将以这种方式重新呈现。

在 Reactjs 中初始加载后，您将如何基于 ajax 查询创建新元素？

How would you create new elements based on an ajax query after initial load in Reactjs?

javascript

ajax

dynamic

reactjs