Question

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

<FormInput label="Phone Number" />

我想在UI上绘制N个。实现这一目标的最佳做法是什么？我最初的想法是创建一个N个成员的数组，所以我可以使用map，如：

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

这当然有点笨拙。是否有一种更具惯用性的方式更“思考反应”？

Answer 1

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

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

（不要忘记指定key让React高兴。）

Answer 2

两年后，这是我所知道的最简约的方法，可以在原生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 />放在它们之间而不是在最后一个之后，你可以做类似的事情

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 Component的示例，请参阅此sandbox。

Answer 3

类似的东西，如果你不想包括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 4

这个hack很简洁。

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

免责声明：如果N接近无穷大，则不要这样做。

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

4 个答案: