问题描述
var indents = [];
for (var i = 0; i < this.props.level; i++) {
indents.push(<span className='indent' key={i}></span>);
}
return indents;
或者
return this.props.level.map((item, index) => (
<span className="indent" key={index}>
{index}
</span>
));
您可以改用一个循环
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>
);
return (
<div>
{this.props.level.map((item, index) => (
<span className='indent' key={index} />
))}
"Some text value"
</div>
);
此外,您必须将返回值包装在容器中。我在上面的例子中使用了 div
正如文档所说here
目前,在一个组件的渲染中,你只能返回一个节点;例如,如果您有要返回的 div 列表,则必须将组件包装在 div、span 或任何其他组件中。
解决方法
我正在尝试将 jQuery 组件转换为 React.js,而我遇到的困难之一是基于 for 循环渲染 n 个元素。
我知道这是不可能的,或者是推荐的,并且模型中存在数组的地方使用map
.
这很好,但是当你没有数组时怎么办?相反,你有一个数值,它等于要渲染的给定数量的元素,那么你应该怎么做?
这是我的示例,我想根据元素的层次级别为元素添加任意数量的 span 标签。所以在第 3 级,我想要在文本元素之前有 3 个跨度标签。
在 JavaScript 中:
for (var i = 0; i < level; i++) {
$el.append('<span class="indent"></span>');
}
$el.append('Some text value');
我似乎无法得到这个,或者任何类似于在 JSX React.js 组件中工作的东西。相反,我必须执行以下操作,首先将临时数组构建为正确的长度,然后循环该数组。
反应.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"
...
);
}
当然这不可能是最好的,或者是实现这一目标的唯一方法?我错过了什么?