23、React 组件与属性：从无状态到有状态的深入解析

React 组件与属性：从无状态到有状态的深入解析

1. 向子组件传递属性

在 React 应用中，组件之间存在着父子关系。父组件通常需要将数据值或回调函数传递给子组件。以下是一个传递属性的示例：
首先，定义 CallbackButton 组件，其代码如下：

import React from "react";
export function CallbackButton(props) {
    return (
        <button className={`btn btn-${props.theme} btn-sm m-1`}
                onClick={ props.callback }>
            { props.text}
        </button>
    )
}

该组件渲染一个按钮，按钮的文本内容由 text 属性设置，点击时调用 callback 属性提供的函数， theme 属性用于选择 Bootstrap CSS 样式。

然后，在 Summary 组件中使用 CallbackButton 组件：

import React from "react";
import { CallbackButton } from