Reactjs 追加一个元素而不是替换

Question

我正在尝试遍历事物的列表/数组/对象：（我使用咖啡脚本保持清晰，jsfiddle of full JS here. 但它只是一个 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.renderComponentpage初始列表，然后在之前调用的模板中迭代，但是，然后我面临一个不同的问题，我必须return一个reactjs元素对象，包括整个列表，我真的不喜欢。

我需要初始调用来创建单独的、独立的反应模板，将彼此附加到一个列表中，最好不使用任何额外的容器，或者使用 jquery。

Answer 1

使用extradiv类创建一个div：

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

在 CSS 中，将它的显示设置为无：

.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)

Answer 2

我认为你的概念是错误的。 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);

看看我在那里做了什么？如果我想要多个divs，我只创建我想看到的数量。它们代表了您的应用的最终外观，因此将同一个 div 多次“附加”在这里实际上没有意义。