javascript - React 循环遍历数组并渲染多个子组件的实例

Question

我正在尝试迭代数组并将字段分配给相应的子组件。我目前的做法如下:

class CardExtension extends React.Component {   
    render() {
        return (
            <div> 
            { this.props.value }
            </div>
        );
    }
}

class Card extends React.Component {   
    render() {
        return (
            <div> 
            { this.props.title }
            </div>
        );
    }
}

定义并导入子组件后，我会将这些类的新实例推送到一个全新的数组中:

class CardContainer extends React.Component {   
    render() {
        var arr = [
                {
                    'id':1,
                    'title':'title',
                    'value':'test_value'
                }
            ]
        var elements=[];
        for(var i=0;i<arr.length;i++){

            elements.push(<Card title={ arr[i].value } />);
            elements.push(<CardExtension value={ arr[i].title } />);
        }
        return (
            <div> 
            {elements}
            </div>
        );
    }
}

有没有办法使用以下格式来完成相同的任务

class CardContainer extends React.Component {   
    render() {

        var arr = [
            {
                'id':1,
                'title':'title',
                'value':'test_value'
            }
        ]
        return (
            <div> 
                {arr.map((el, idx) => (
                    <Card title={ el.value } />
                    <CardExtension value={ el.title } />
                ))}
            </div>
        );
    }
}

@更新问题是，每当我使用最新的解决方案时，我都会收到以下错误消息:相邻的 JSX 元素必须包含在封闭标签中 (39:24)

Answer 1

工作解决方案:

import React, { Component, Fragment } from 'react';

export default class CardContainer extends React.Component {   
    render() {

        var arr = [
            {
                'id':1,
                'title':'title',
                'value':'test_value'
            }
        ]

        return (
            <div> 
                {arr.map((el, idx) => (
                    <Fragment>
                        <Card title={ el.value } />
                        <CardExtension value={ el.title } />
                    </Fragment>
                ))}
            </div>
        );
    }
}