我正在尝试遍历事物的列表/数组/对象:(我使用 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行为。
我想知道是否有办法告诉 React 追加而不是替换 div。
如果可能的话,我想避免使用 jquery,并且纯粹以 react 方式进行。
虽然我想给 React.renderComponent
page
初始列表,然后在之前调用的模板中迭代,但是,我面临着一个不同的问题,我必须返回
一个由整个列表组成的 reactjs 元素对象,我真的不喜欢这样。
我需要初始调用来创建单独的、独立的 React 模板,将彼此附加到列表中,最好不要任何额外的容器,或者使用 jquery。
最佳答案
我认为您的概念有误。 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
在这里没有实际意义。
关于javascript - Reactjs 追加一个元素而不是替换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22334104/