如何将JSX元素连接成一个数组？

Question

在React世界中令人沮丧的时候......我需要能够根据某些标准创建标记.例如,我收到一系列项目.我需要检查这些项目,并根据标准,我需要生成不同的标记.例如,我有一个函数接收一个项目数组:

processItems(itemArray) {
    // Create an empty array that will hold the final JSX output.
    let buffer = []

    // Somehow push the first required markup into the buffer.
    buffer.push(<div className"container flex center">);

    // ... here we do a switch statement that evaluates each item in the 'itemArray' argument and based on that I create different <div className="XYZ">{...put stuff here...}</div> markup, which I will push into the buffer - which will contain the final JSX output...

    // Now I close the initial container element
    buffer.push(</div>);

    // And return the buffer for display inside the render() function
    return buffer;
}

问题是,我不能简单array.push()地将单个标记添加到数组中,因为反应由于某种原因不喜欢它,而我最终会得到显示的乱码内容.

任何想法我怎么可能这样做？

Answer 1

您的解决方案应如下所示:

processItems(itemArray) {
    // Create an empty array that will hold the final JSX output.
    let buffer = []

    buffer.push(<div>A</div>);
    buffer.push(<div>B</div>);
    buffer.push(<div>C</div>);


    // And return the buffer for display inside the render() function
    return (
        <div className"container flex center">
            {buffer}
        </div>
    );
}

JSX不是HTML,您无法通过多个步骤组装html元素.