主页 / 问题 / 943053
Accepted
Иван Иванов
Asked:2020-02-10 11:58:23 +0000 UTC2020-02-10 11:58:23 +0000 UTC

使用 map 列出数组的元素

  • 772

下午好，亲爱的专业人士！我正在研究 React，但不知道如何使用map显示数组。我得到了一个数组： 

{"_id": "680rrk5wftyse8c6swl7xsec",
 "header": "заголовок 1",
 "text": "текст 1"},
{"_id": "kswgp8a9l5ihep9rwteaudh1",
 "header": "456",
 "text": "789"},
{"_id": "wttr2awfxvp6sqzdj7rlqq4r",
 "header": "123",
 "text": "123"},
{"_id": "633wit5sjo7t5adm6jii0ugt",
 "header": "Название новости",
 "text": "Текст новости"}

需要将这个数组元素逐个元素输出到这个组件

class post extends Component {
    render() {
        return (
            <div className="Post">
                <h3>ID</h3>
                <h3>Header</h3>
                <h4>Text</h4>
            </div>
        );
    }
}

массивы

1 个回答

  1. Best Answer
    import React from 'react';

class SomeClass extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [
                {
                    "_id": "680rrk5wftyse8c6swl7xsec",
                    "header": "заголовок 1",
                    "text": "текст 1"
                },
                {
                    "_id": "kswgp8a9l5ihep9rwteaudh1",
                    "header": "456",
                    "text": "789"
                },
                {
                    "_id": "wttr2awfxvp6sqzdj7rlqq4r",
                    "header": "123",
                    "text": "123"
                },
                {
                    "_id": "633wit5sjo7t5adm6jii0ugt",
                    "header": "Название новости",
                    "text": "Текст новости"
                }
            ]
        }
    }


    render() {
        const {data} = this.state;
        const Component = this.Child;
        return (<React.Fragment>
                {data.map(element => <Component key={element._id} {...element} />)}
            </React.Fragment>
        );
    }


    Child = ({_id, header, text}) => {
        return (<div className="Post">
            <h3>{_id}</h3>
            <h3>{header}</h3>
            <h4>{text}</h4>
        </div>);
    }
}

export default SomeClass;

    如果你想把它放在一个单独的类中，它看起来像这样：

    class Post extends Component {
    render() {
        const {_id, header, text} = this.props;
        return (
            <div className="Post">
                <h3>{_id}</h3>
                <h3>{header}</h3>
                <h4>{text}</h4>
            </div>
        );
    }
}

    类必须以大写字母命名。

    • 0

相关问题