提问人：Thomas Murphy 提问时间：6/16/2016 更新时间：5/31/2019 访问量：4741
在 React 中生成 N 个组件的最佳实践（无数据）
Best practices for generating N of a component in React (without data)
问：
假设我有一个组件，例如：
<FormInput label="Phone Number" />
我想在 UI 上绘制 N 个。实现这一目标的最佳实践是什么？我最初的想法是创建一个 N 成员数组，这样我就可以使用 map，例如：
var myMapTrigger = [0,0,0,0,0]
myMapTrigger.map(function(){
return (<FormInput label="Phone Number" />)
}
这当然有点骇人听闻。有没有一种更惯用的方式，更“思考 React”？
答：
3赞
Josh Kelley
6/16/2016
#1
如果您愿意使用 Lodash，那么 _.times 会很好用。
_.times(N, i => <FormInput key={i} label="Phone Number" />);
（别忘了指定一个键来让 React 满意。
评论
0赞
azium
6/16/2016
_.times(number, function)
0赞
Josh Kelley
6/16/2016
@azium - 已修复。谢谢。
1赞
luiscrjr
6/17/2016
#2
类似的东西，如果你不想包括：lodash
renderForm() {
const times = 5;
const inputs = [];
for(var i=0; i<times;i++) {
inputs.push(<FormInput key={i} label="Phone Number" />);
}
return inputs;
}
render() {
return <div>{this.renderForm()}</div>;
}
评论
0赞
Thomas Murphy
6/17/2016
这与我最终采用的解决方案非常相似，尽管我使用 map（） 而不是显式 for 循环来做到这一点。不过，我不认为时间和输入应该是恒定的......虽然我知道 const 不会使 rVal 不可变，但我认为约定建议它们应该是 var
1赞
luiscrjr
6/17/2016
约定说，每次你知道引用不会改变时，就要使用 const（在对象、数组的情况下）。否则，请使用 let。我曾经这样做过，因为没有数组可以迭代。这是一个时间计数器。但这只是实现目标的一种方式。当然，还有其他人。
3赞
Alex Ruble
4/25/2018
#3
两年后，这是我所知道的在原生 JS 中创建一个包含元素的数组的最简洁的方法。n
const duplicate = (x, n) => Array.from(new Array(n), () => x);
const n = 3;
const oneComp = <span>Unicorns & Rainbows</span>;
const nComps = duplicate(oneComp, n);
class FormInputGroup extends React.Component {
// ...
render() {
// ...
return <div>{nComps}</div>;
}
// or, in this case,
render = () => <div>{nComps}</div>;
}
// or even
const ComponentGroup = () => <div>{nComps}</div>;
// renders as "Unicorns & RainbowsUnicorns & RainbowsUnicorns & Rainbows"
如果您想知道为什么不直接使用 ，这是因为该表达式具有 长度 ，但包含 0 个元素 — 即new Array(n)n
const trashArray = new Array(n);
console.log(trashArray.length) // prints `n`
console.log(Object.keys(trashArray)) // prints `[]`
— 这意味着将始终产生一个空数组（但一个带有 的数组，感谢 JavaScript）。trashArray.map(func).length = n
（如果它们是内联的，并且你想在它们之间放置 s，但不在最后一个之后，你可以做类似的事情<br />
const zipInLineBreaks = tags => tags.reduce((accum, currentEl, i, arr) => accum
.concat([currentEl]) // or, in this case, `[oneComp]`
.concat((i === arr.length - 1)
? []
: [<br /]
), []);
const children = zipInLineBreaks(nComps);
Group = () => <div>{children}</div>;
/*
* "Unicorns & Rainbows
* Unicorns & Rainbows
* Unicorns & Rainbows"
*/
.)
请参阅此沙盒，了解重复元素是 React 组件的示例。
3赞
Alexandru Kis
5/31/2019
#4
这个技巧非常简洁。
Array.from(Array(N)).map(() => {...})
免责声明：如果 N 接近无穷大，请不要这样做。
评论