Reactjs添加元素而不是替换

Question

我正在尝试迭代一组事物的列表/数组/对象：（我使用coffeescript使其更清晰，完整JS的jsfiddle在此处。但只是一个forEach）

pages = for page, each of @props.ids
    $('#start').append("<div id='"+page+"' ></div>")
    React.renderComponent page(title: each.title, text: each.text), $("#"+page)[0]

而不是替换每个元素，将它们附加在列表末尾，仅保留最后一个项目。

其中#start元素是起始容器，我想用多个元素填充它，但我需要给每个元素单独的容器，否则它们将彼此覆盖，这是reactjs的默认行为。

我想知道是否有一种方法可以告诉react附加而不是替换div。

如果可能的话，我想避免使用jquery，并纯粹使用react。

我考虑给React.renderComponent page传递初始列表，然后在之前调用的模板中进行迭代，但是，然后我面临着另一个问题，我必须return reactjs元素对象，由整个列表组成，我确实不喜欢。

我需要让最初的调用创建单独的、独立的react模板，将它们附加在一个列表中，最好不使用任何额外的容器或jquery。

- TrySpace

Answer 1

我觉得你对概念的理解有误。React的renderComponent确实会在某处渲染单个组件。多次这样做只会在那个地方重新渲染同一个组件（即幂等）。至少不是以你所要求的方式出现真正的“追加”语句。

这里有一个你想实现的示例。在此过程中，请忘记renderComponent。它只是将组件放置在某个地方。

/** @jsx React.DOM */
var pages = [{title: 'a', text: 'hello'}, {title: 'b', text: 'world'}];

var App = React.createClass({
  render: function() {
    return (
      <div>
        {
          this.props.pages.map(function(page) {
            return <div>Title: {page.title}. Text: {page.text}</div>;
          })
        }
      </div>
    );
  }
});

React.renderComponent(<App pages={pages} />, whateverDOMNodeYouWantItToBeOn);

看到我做了什么吗？如果我想要多个div，我只需创建所需数量即可。它们代表您的应用程序的最终外观，因此在此处多次“附加”相同的div并没有太多意义。

- chenglou

---

我想要追加它的原因是为了保持它作为一个独立的组件，这样我就可以单独更新或修改每个页面。我需要访问状态和willComponentUpdate。设置和获取。类似树形结构的json表示dom，当我改变json时，dom也会相应改变。 - TrySpace

在React中做这件事非常容易。如果您需要更多帮助，请来irc #reactjs频道。 - chenglou

renderComponent 已经被弃用了吗？ - John Doe

答案有点过时，但是是的，现在它被称为 React.render。 - chenglou

现在实际上是ReactDOM.render。 - Dionys

Answer 2

创建一个类名为 extradiv 的 div：

<div class="extradiv">
  
</div>

在 CSS 中，将它的 display 属性设置为 none：

.extradiv {
  display: none;
}
.extradiv * {
  display: none;
}

在JS中实现这个函数：

function GoodRender(thing, place) {
    let extradiv = document.getElementsByClassName('extradiv')[0];
    ReactDOM.render(thing, extradiv);
  extradiv = document.getElementsByClassName('extradiv')[0];
  place.innerHTML += extradiv.innerHTML;
}

然后您就可以使用此代码替换ReactDOM.render：

GoodRender(<Component>My Text</Component>, YourDOMObject)

- Shaurya Chhabra