IT技术 - 如何将 JSX 元素连接成一个数组？ - 吾爱随笔录

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()地将单个标记添加到数组中，因为出于某种原因，react 不喜欢它，而且我最终会得到显示的乱码。

任何想法我怎么可能做到这一点？

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