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

Reactjs append an element instead of replacing

提问by TrySpace

I'm trying to iterate through a list/array/object of things: (I used coffeescript to keep it clear, jsfiddle of full JS here.but it's just a forEach)

我正在尝试遍历事物的列表/数组/对象：（我使用了咖啡脚本来保持清晰，这里是完整 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]

and append each of them, instead of replacing, leaving only the last item in the list.

并附加它们中的每一个，而不是替换，只留下列表中的最后一项。

Where the #startelement is the starting container, and I want to populate it with multiple elements, but I need to give each their own container, otherwise they will all overwrite eachother, the default reactjs behaviour.

当#start元素是启动容器，我想多元素来填充它，但我需要给每一个自己的容器，否则会覆盖所有的海誓山盟，默认reactjs行为。

I'm wondering if there's a way to tell react to append instead of replacing the div.

我想知道是否有办法告诉 react 追加而不是替换 div。

I'd like to avoid using jquery if possible, and do it purely react-ly.

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

I though about giving the React.renderComponentpagethe initial list, and then iterate in the previously called template, however, then i'm facing a different problem, I have to returna reactjs element object, consisting of the whole list, which I really don't prefer.

我虽然关于给出React.renderComponentpage初始列表，然后在之前调用的模板中迭代，但是，然后我面临一个不同的问题，我必须有return一个 reactjs 元素对象，由整个列表组成，我真的不喜欢.

I need for the initial call to create individual, independent react templates, appending eachother in a list, prefferably without any extra containers, or using jquery.

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

回答by chenglou

I think you're getting the concept wrong. React's renderComponentindeed renders a single component, somewhere. Doing this multiple times only re-renders the same component at that place (aka idempotent). There's no real "append" statement, at least not in the way you asked for.

我认为你的概念是错误的。ReactrenderComponent确实在某处渲染了单个组件。多次执行此操作只会在该位置重新渲染相同的组件（又名幂等）。没有真正的“追加”语句，至少不是您要求的方式。

Here's an example of what you're trying to achieve. Forgot about renderComponentin this. It's just to put the component somewhere.

这是您要实现的目标的示例。忘记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);

See what I did there? If I want multiple divs, I just create as many as I want to see. They represent the final look of your app, so making a same divbe "appended" multiple times doesn't really make sense here.

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