22、React组件与属性的深入应用

React组件与属性的深入应用

在React开发中，我们经常会遇到处理数组、渲染多个元素、使用函数属性等场景。下面将详细介绍这些方面的知识和操作方法。

1. 渲染数组

在React中，组件常常需要为数组中的每个元素创建HTML元素，比如显示列表项或表格行。为了演示这一点，我们先更新 App 组件，为 Summary 组件配置一个属性，代码如下：

import React from "react";
//import { Message } from "./Message";
import { Summary } from "./Summary";
export default function App() {
    return  (
        <div>
            <h1 className="bg-primary text-white text-center p-2">
                Hello Adam
            </h1>
            <Summary names={ ["Bob", "Alice", "Dora"]} />
        </div>
    )
}

这里的 names 属性为 Summary 组件提供了一个字符串值数组。接下来，我们修改 Summary 组件的渲染内容，使其为数组中的每个