第七章 react组件实例中三大属性之props

在React中，props是properties的缩写，也就是属性。props是组件对象中保存着自身属性状态的一个对象。props是组件之间通信的桥梁，是组件的一个重要属性。

以下是一个简单的React组件示例，展示了如何使用props：

import React from 'react';
 
// 定义一个名为HelloComponent的组件
function HelloComponent(props) {
    return <h1>Hello, {props.name}!</h1>;
}
 
// 使用默认属性值定义组件
HelloComponent.defaultProps = {
    name: 'Guest'
};
 
export default HelloComponent;

在这个例子中，我们定义了一个名为HelloComponent的组件，它接收一个名为name的props。我们还为这个组件设置了一个defaultProps，当没有提供name属性时，默认显示'Guest'。

在父组件中，我们可以这样使用HelloComponent：

import React from 'react';
import HelloComponent from './HelloComponent';
 
const App = () => {
    return (
        <div>
            <HelloComponent name="John Doe" />
        </div>
    );
};
 
export default App;

在这个例子中，我们在App组件中引用了HelloComponent组件，并通过props传递了name属性，值为'John Doe'。

总结：props是React组件之间通信的基础，它是只读的，不能直接修改，要修改props需要在父组件中修改对应的状态。