[英]Make a new div element for each element in an array with JSX?
I am trying to make a div element for each element in an array using reactjs JSX.我正在尝试使用 reactjs JSX 为数组中的每个元素创建一个 div 元素。 I was not sure how to really go about this but I tried doing this:
我不确定如何真正做到这一点,但我尝试这样做:
{results.forEach(element => {
<div className={classes.SearchResults}>
{results[element]}
</div>
})}
This didn't work but I am fairly confident that it is something along these lines.这没有用,但我相当有信心它是沿着这些路线的。 I receive no errors results is an array element I defined elsewhere and that is working completely.
我没有收到任何错误结果是我在别处定义的一个数组元素,它完全正常工作。 The only issue is displaying a new div element for each of elements within the results array.
唯一的问题是为结果数组中的每个元素显示一个新的 div 元素。 If you need more code I am happy to give you it though I think this should be a sufficient amount.
如果您需要更多代码,我很乐意为您提供,但我认为这应该足够了。
Close.关闭。
First, you want .map()
, not .forEach()
.首先,您需要
.map()
,而不是.forEach()
。 The latter just iterates but doesn't return anything, whereas the former returns a new array (with the same size as the original) "mapped" to a new element structure (in this case JSX elements).后者只是迭代但不返回任何内容,而前者返回一个新数组(与原始数组大小相同)“映射”到新元素结构(在本例中为 JSX 元素)。
Aside from that... The use of curly braces {}
here creates a function body, which in this case consists of a JSX element but doesn't return anything:除此之外......这里使用大括号
{}
创建了一个函数体,在这种情况下它由一个 JSX 元素组成,但不返回任何内容:
{
<div className={classes.SearchResults}>
{results[element]}
</div>
}
You can return the element explicitly:您可以显式返回元素:
{
return (<div className={classes.SearchResults}>
{results[element]}
</div>);
}
Or use an implicit return from the arrow function by using parentheses ()
around it to have the whole function be just one statement (instead of an explicit function body):或者通过在箭头函数周围使用括号
()
来使用箭头函数的隐式返回,使整个函数只是一个语句(而不是显式函数体):
(
<div className={classes.SearchResults}>
{results[element]}
</div>
)
Additionally... The use of results[element]
looks wrong here.另外...这里使用
results[element]
看起来是错误的。 The first callback argument to .map()
isn't the index , it's the element itself. .map()
的第一个回调参数不是index ,而是元素本身。 I suspect you want this:我怀疑你想要这个:
(
<div className={classes.SearchResults}>
{element}
</div>
)
As a final note, in React you'll see warnings if you iterate over an array like this to produce JSX but don't supply a key
property to the JSX element.最后要注意的是,在 React 中,如果您迭代这样的数组以生成 JSX,但不向 JSX 元素提供
key
属性,您将看到警告。 If the element
object has an identifier, such as an id
property, you can use that:如果
element
对象具有标识符,例如id
属性,则可以使用它:
(
<div key={element.id} className={classes.SearchResults}>
{element}
</div>
)
But failing that, you can always rely on the second argument to the .map()
callback, which is just the array element's index:但是做不到这一点,你总是可以依靠第二个参数
.map()
回调,这仅仅是数组元素的索引:
{results.map((element, i) => (
<div key={i} className={classes.SearchResults}>
{element}
</div>
))}
forEach
just runs your callback ignoring the return value forEach
只是运行您的回调而忽略返回值
map
is used to transform and return a new value for each iteration, hence you can use the following instead: map
用于为每次迭代转换并返回一个新值,因此您可以使用以下代码:
{results.map((element, index) => {
return (
<div className={classes.SearchResults} key={index}>
{results[element]}
</div>
)
})}
You're close, but you're using the wrong array method here.你很接近,但你在这里使用了错误的数组方法。
Array.map()
returns a new array, and you can use that to return an array of divs
to render for each item in the results
array. Array.map()
返回一个新数组,您可以使用它返回一个divs
数组,以便为results
数组中的每个项目呈现。
For more details, take a look here: https://reactjs.org/docs/lists-and-keys.html有关更多详细信息,请查看此处: https : //reactjs.org/docs/lists-and-keys.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.