在 React 中创建动态 html

Question

假设我有一个组件将 MeetingData 作为 object 并使用 object:

中的特定项目填充 <p> 元素

import React from 'react';

export default function MeetingsCard({ meetingData }) {
    return (
        <div className="col-xl-1-12" style={{ margin: "10px", background: "#1A4565", border: "double" }}>
            <div className="card" style={{ border: "none", width: "100%" }}>
                <div className="card-body" style={{ width: "100%", background: "lightBlue" }}>
                    <h3 className="card-title" style={{ marginLeft: "10px" }}>Meetings</h3>
                    <p style={{ marginLeft: "50px" }}>Meeting location: {meetingData.meeting_location}, Meeting Date: {meetingData.meeting_date}</p>
                    <hr style={{ color: "grey" }} />
                </div>
            </div>
        </div>
    )
}

在这种情况下，它预计 meetingData.meeting_date 只有一个项目，meetingData.meeting_location 只有一个项目。但是假设返回的 object 不止一个，我需要填充多个 <p> 元素？如果会议 object/array 看起来像这样，我该怎么做：

meetingData =  [
    {
        "date_time": "2021-07-07",
        "meeting_location": "test-location1",
        "name": "John Doe"
    },
    {
        "date_time": "2021-07-08",
        "meeting_location": "test-location2",
        "name": "John Doe"
    }
]

Answer 1

您可以循环遍历数组并显示如下所示的数据

export default function MeetingsCard({ meetingData }) {
    return (
        <div className="col-xl-1-12" style={{ margin: "10px", background: "#1A4565", border: "double" }}>
            <div className="card" style={{ border: "none", width: "100%" }}>
                <div className="card-body" style={{ width: "100%", background: "lightBlue" }}>
                    <h3 className="card-title" style={{ marginLeft: "10px" }}>Meetings</h3>
{meetingData.map(meeting => (
                    <p style={{ marginLeft: "50px" }}>Meeting location: {meeting.meeting_location}, Meeting Date: {meeting.date_time}</p>))
                    <hr style={{ color: "grey" }} />
                </div>
            </div>
        </div>
    )
}

Answer 2

只需循环您的数据并将每个条目添加为自己的条目即可。为会议条目创建自己的组件也是个好主意，以便在必要时更容易对其进行自定义。

会议入口：

import React from 'react';

export default function MeetingEntry({ meetingData }) {
    return (
          <p style={{ marginLeft: "50px" }}>Meeting location: {meetingData.meeting_location}, Meeting Date: {meetingData.meeting_date}</p>
    )
}

会议卡片：

import React from 'react';
import MeetingEntry from './MeetingEntry';

export default function MeetingsCard({ data }) {
    return (
        <div className="col-xl-1-12" style={{ margin: "10px", background: "#1A4565", border: "double" }}>
            <div className="card" style={{ border: "none", width: "100%" }}>
                <div className="card-body" style={{ width: "100%", background: "lightBlue" }}>
                    <h3 className="card-title" style={{ marginLeft: "10px" }}>Meetings</h3>
                    {data.map((el, idx) => (
                          <MeetingEntry notification={el} key={idx} />
                    ))}
                    <hr style={{ color: "grey" }} />
                </div>
            </div>
        </div>
    )
}

在 React 中创建动态 html

Creating dynamic html in React

arrays

reactjs

react-functional-component