[英]React render from a loop
I'm trying to do something very simple but its not playing well with my code. 我正在尝试做一些非常简单的事情,但它与我的代码的配合不好。 I can see it render but only 3 times and not 9
我可以看到它渲染,但是只有3次而不是9次
const renderTempBoxes = () => {
for (var i = 0; i < 10; i++) {
console.log('i = ', i);
return <div className={styles.box} key={i} />;
}
};
const Component = () => {
return (
{renderTempBoxes()}
)
}
This doesn't even work, which is overkill to use an array when I just want 9 boxes to render. 这甚至都行不通,当我只想渲染9个框时,使用数组就太过分了。 UPDATE:
更新:
const Component = () => {
return (
<div>
{
[...Array(10)].map((x, i) => {
console.log('i = ', i);
return <div className={styles.box} key={i} />;
})
}
</div>
)
}
The first issue is that you simply cannot return individual elements from within the for
loop like that. 第一个问题是,您根本无法像这样从
for
循环中返回单个元素。 This is not specific to React, this is simply a JavaScript issue. 这不是特定于React,这只是一个JavaScript问题。 Instead you can try something like this using Array.from to map an array of elements:
相反,您可以尝试使用Array.from这样的方法来映射元素数组:
const renderTempBoxes = () => Array.from({ length: 10 }).map((v, i) =>
<div className={styles.box} key={i}>{i}</div>
);
Or simply the for
loop with Array.prototype.push
to generate an array of elements and return it: 或者只是使用
Array.prototype.push
的for
循环来生成元素数组并返回它:
const renderTempBoxes = () => {
let els = [];
for (let i = 0; i < 10; i++) {
els.push(<div className={styles.box} key={i}>{i}</div>);
}
return els;
};
Rendering the elements: 渲染元素:
const Component = () => {
return (
<div>
{renderTempBoxes()}
</div>
)
}
Or with React.Fragment
to forgo the wrapping extra node: 或者使用
React.Fragment
放弃包装额外的节点:
const Component = () => {
return (
<React.Fragment>
{renderTempBoxes()}
</React.Fragment>
)
}
The second issue with your example is that <div />
isn't going to really render anything, it's not a void/self-closing element such as <meta />
. 您的示例的第二个问题是
<div />
不会真正呈现任何内容,它不是void /自闭合元素,例如<meta />
。 Instead you would need to do return the div element as <div className={styles.box} key={i}>{whatever}</div>
. 相反,您需要将div元素返回为
<div className={styles.box} key={i}>{whatever}</div>
。
Regarding the syntax [...Array(10)]
, there must be an Webpack in terms of how it handles/transpiles Array(10)
, [...Array(10)]
, [...new Array(10)]
, or even `[...new Array(10).keys()]. 关于语法
[...Array(10)]
,必须有一个Webpack来处理/转换Array(10)
, [...Array(10)]
, [...new Array(10)]
甚至是[[... new Array(10).keys()]。 Either of the approaches described in the answer should solve your issue. 答案中描述的任何一种方法都可以解决您的问题。
I've created a StackBlitz to demonstrate the functionality. 我创建了一个StackBlitz来演示该功能。
When trying to render multiple times the same components use an array an map over it. 尝试多次渲染相同组件时,请使用数组在其上的映射。
export default class MyComp extends Component {
constructor(props) {
super(props)
this.state = {
array: [{key: 1, props: {...}}, {key: 2, props: {...}, ...]
}
}
render () {
return (
<div>
{this.state.array.map((element) => {
return <div key={element.key} {...element.props}>
})}
</div>
)
}
}
Remember to always set a unique key to every component you render 记住要始终为渲染的每个组件设置唯一键
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.