在 React 中生成 N 个组件的最佳实践（无数据）

Question

假设我有一个组件，例如：

<FormInput label="Phone Number" />

我想在 UI 上画 N 个。实现这一目标的最佳实践是什么？我最初的想法是创建一个包含 N 个成员的数组，这样我就可以使用 map，例如：

var myMapTrigger = [0,0,0,0,0]
myMapTrigger.map(function(){
  return (<FormInput label="Phone Number" />)
}

这当然有点 hacky though.Is 还有一种更惯用的方法 "thinking React"?

Answer 1

如果您愿意使用 Lodash，那么 _.times 会很好。

_.times(N, i => <FormInput key={i} label="Phone Number" />);

（不要忘记指定 key 让 React 开心。）

Answer 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>;
}

Answer 3

两年后，这是我所知道的在原生 JS 中创建包含 n 个元素的数组的最简洁的方法。

const duplicate = (x, n) => Array.from(new Array(n), () => x);

const n = 3;
const oneComp = <span>Unicorns &amp; 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"

如果您想知道为什么不直接使用 new Array(n)，那是因为该表达式的长度为 n，但包含 0 个元素 — 即

const trashArray = new Array(n);

console.log(trashArray.length) // prints `n`
console.log(Object.keys(trashArray)) // prints `[]`

——这意味着 trashArray.map(func) 将始终生成一个空数组（但是 .length = n，谢谢 JavaScript）。

（如果它们是内联的，并且您想在它们之间放置 <br />s 但不是在最后一个之后，您可以执行类似

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"
 */

.)

请参阅此 sandbox 示例，其中重复元素是 React 组件。

Answer 4

这个 hack 非常简洁。

Array.from(Array(N)).map(() => {...})

免责声明：如果 N 接近无穷大，请勿这样做。

在 React 中生成 N 个组件的最佳实践（无数据）

Best practices for generating N of a component in React (without data)

reactjs

map-function