Question

我试图遍历列表/数组/事物的对象:(我使用coffeescript来保持清晰，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行为。

我想知道是否有办法告诉你做出反应而不是替换div。

如果可能的话，我想避免使用jquery，并且完全做出反应。

我虽然给了React.renderComponent page初始列表，然后在先前调用的模板中进行迭代，但是，然后我面临不同的问题，我必须{{1一个reactjs元素对象，由整个列表组成，我真的不喜欢。

我需要初始调用来创建单独的，独立的反应模板，在列表中相互附加，最好没有任何额外的容器，或者使用jquery。

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。它们代表了您应用的最终外观，因此在同一时间内对{{1}}进行多次“追加”并不合理。

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

1 个答案: