如何在没有要映射的对象数组的情况下循环和渲染 React.js 中的元素? [英] How to loop and render elements in React.js without an array of objects to map?
问题描述
我正在尝试将 jQuery 组件转换为 React.js,我遇到的困难之一是基于 for 循环渲染 n 个元素.
我理解这是不可能的,或推荐的,并且如果模型中存在数组,则使用 map
完全有意义.那很好,但是当您没有数组时怎么办?取而代之的是,您的数值等于要呈现的给定数量的元素,那么您应该怎么做?
这是我的示例,我想根据元素的层次级别为元素添加任意数量的跨度标记作为前缀.所以在第 3 级,我希望在文本元素之前有 3 个 span 标签.
在 JavaScript 中:
for (var i = 0; i
我似乎无法理解这个,或者任何类似于在 JSX React.js 组件中工作的东西.相反,我必须执行以下操作,首先构建一个正确长度的临时数组,然后循环该数组.
React.js
render: function() {var tmp = [];for (var i = 0; i < this.props.level; i++) {tmp.push(i);}var indents = tmp.map(function (i) {返回 (<span className='indent'></span>);});返回 (...{缩进}一些文本值"...);}
这肯定不是最好的,还是唯一的方法?我错过了什么?
更新:从 React > 0.16 起
Render 方法不一定必须返回单个元素.也可以返回一个数组.
var indents = [];for (var i = 0; i < this.props.level; i++) {indents.push(<span className='indent' key={i}></span>);}返回缩进;
或
return this.props.level.map((item, index) => (<span className="indent" key={index}>{指数}</span>));
<小时>旧:
你可以用一个循环代替
var indents = [];for (var i = 0; i < this.props.level; i++) {indents.push(<span className='indent' key={i}></span>);}返回 (<div>{缩进}一些文本值"
);
您也可以使用 .map 和花哨的 es6
返回(<div>{this.props.level.map((item, index) => (<span className='indent' key={index}/>))}一些文本值"
);
此外,您必须将返回值包装在容器中.我在上面的例子中使用了 div
正如文档所说这里
<块引用>目前,在一个组件的渲染中,你只能返回一个节点;例如,如果您有一个要返回的 div 列表,则必须将组件包装在 div、span 或任何其他组件中.
I'm trying to convert a jQuery component to React.js and one of the things I'm having difficulty with is rendering n number of elements based on a for loop.
I understand this is not possible, or recommended and that where an array exists in the model it makes complete sense to use map
. That's fine, but what about when you do not have an array? Instead you have numeric value which equates to a given number of elements to render, then what should you do?
Here's my example, I want to prefix a element with an arbitrary number of span tags based on it's hierarchical level. So at level 3, I want 3 span tags before the text element.
In javascript:
for (var i = 0; i < level; i++) {
$el.append('<span class="indent"></span>');
}
$el.append('Some text value');
I can't seem to get this, or anything similar to work in a JSX React.js component. Instead I had to do the following, first building a temp array to the correct length and then looping the array.
React.js
render: function() {
var tmp = [];
for (var i = 0; i < this.props.level; i++) {
tmp.push(i);
}
var indents = tmp.map(function (i) {
return (
<span className='indent'></span>
);
});
return (
...
{indents}
"Some text value"
...
);
}
Surely this can't be the best, or only way to achieve this? What am I missing?
Updated: As of React > 0.16
Render method does not necessarily have to return a single element. An array can also be returned.
var indents = [];
for (var i = 0; i < this.props.level; i++) {
indents.push(<span className='indent' key={i}></span>);
}
return indents;
OR
return this.props.level.map((item, index) => (
<span className="indent" key={index}>
{index}
</span>
));
Docs here explaining about JSX children
OLD:
You can use one loop instead
var indents = [];
for (var i = 0; i < this.props.level; i++) {
indents.push(<span className='indent' key={i}></span>);
}
return (
<div>
{indents}
"Some text value"
</div>
);
You can also use .map and fancy es6
return (
<div>
{this.props.level.map((item, index) => (
<span className='indent' key={index} />
))}
"Some text value"
</div>
);
Also, you have to wrap the return value in a container. I used div in the above example
As the docs say here
Currently, in a component's render, you can only return one node; if you have, say, a list of divs to return, you must wrap your components within a div, span or any other component.
这篇关于如何在没有要映射的对象数组的情况下循环和渲染 React.js 中的元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!