Question

我有这个用例，其中有更多的负载＆＃39;页面上的按钮用于从API端点获取更多项目，因此我希望这些项目在到达时附加到DOM。问题是，Web服务器提供的HTML页面带有一些额外的列表项（如下所示），在我装载我的React组件的同一var g = $("#<%=text.ClientID%>").text(); div容器中，在页面加载时带有空数据/道具

PreparedStatement stup = con.prepareStatement(
        "UPDATE TrailerLocationMaster" +
        "SET Block = ?, Location = ?, Day = NOW(), SetTime = NOW(), Comment = ?" +
        "Where Trailer = ?;");

stup.setString(1, BlockName);
stup.setString(2, LocationName);
stup.setString(3, text);
stup.setString(4, TrailerName);
stup.addBatch();

stup.executeBatch();

我的假设是，如果我以ReactJS的方式处理这个问题，只要我从服务器（REST）获取更多项目并将这些项目附加到＆＃39; itemList＆＃39;状态数组，react会以某种方式替换所有包含＆＃39; item-list＆＃39;安装组件的div。

我认为可行的快速解决方法，并且它不依赖于同构的东西并预先渲染服务器上的react组件，就是创建一个具有相同div的独立兄弟div班级名称＆＃39; item-list＆＃39;并添加一个id属性来安装组件，因此生成的HTML将如下所示：

item-list

也许有一种更简洁的方法可以在不涉及同构的东西的情况下完成它，或者我可能不理解React概念及其工作原理。无论如何，我们将非常感谢您对此有任何指示。

Answer 1

好的，您的问题并不清楚，但HTML中生成的代表的数据完全与您的数据不同将通过AJAX获得。

这有一个简单的解决方案。你要做的就是抓住已经存在的数据，将它存储到一个数组中，并将你将通过AJAX获取的新数据附加到其中，而不是创建一个与原始DOM布局相邻的全新DOM元素。阵列。这样，您将获得React的DOM差异化的好处。为什么有用？也许你想让用户对数据进行排序，或者直接与数据交互，同时它仍然完全控制父React组件。

所以无论如何，看看这个小提琴：https://jsfiddle.net/x4jjry04/3/。这是基于Paul Booblic的小提琴。

var Page = React.createClass({ 
  getDefaultProps: function () {
    return {
      items: []
    }
  },
  getInitialState : function(){
    return{
      items : this.props.items
    }
  },
  componentDidMount: function () {
    // Mimics an AJAX call, but replace this with an actial AJAX call.
    setTimeout(function () {
      var dataFromAjax = ['one', 'two', 'three'];
      this.setState({
        items: this.state.items.concat(dataFromAjax)
      });
    }.bind(this));
  },
  addClick : function(){
    this.state.items.push("more");
    this.forceUpdate();
  },
  render : function(){
    return <div>{this.state.items.map(function(item){return <div className="bla-bla-class">{item}</div>})}<br/><div onClick={this.addClick}>ADD</div></div>;
  }
});

var elements = document.querySelectorAll('.item-list__child-item');

var initialvalues = Array.prototype.slice
  .call(elements)
  .map(function (div) {
    return div.innerHTML;
  });

React.render(<Page items={initialvalues} />, document.body);

Answer 2

检查这个简单的小提琴演示：

https://jsfiddle.net/x4jjry04

<body id="bd">
    <div id="did"></div>
    <button id="btn" >Tryit</button>
</body>

Answer 3

我假设您正在使用react服务器端来呈现列表？

在页面加载时，您从服务器获取原始列表并让组件重新呈现＆＃34;要素。重新渲染是引号，因为除非列表更改，否则React实际上不会更新列表。现在，您可以使用按预期工作的组件进行设置，并且可以根据需要将元素添加到列表中。

同构/通用React的一般理念是，您将应用视为普通的单页应用，让React处理脏检查的魔力。

这也意味着您可以在服务器上呈现时使用相同的组件，因为您的组件不包含任何客户端特定的代码。

ReactJS组件呈现以及如何将元素附加到组件所安装的div上

3 个答案: