在 React 中，props（屬性）用于在組件之間傳遞數據。它是父組件向子組件傳遞信息的一種方式，通過 props，父組件可以向子組件傳遞數據、回調函數、配置項等。

注意： props 是只讀的，它的值由父組件傳遞給子組件時確定，并且在子組件中不能直接修改。如果子組件需要改變這些值，應該通過回調函數等方式將要修改的數據傳遞給父組件，由父組件來更新相關的狀態(tài)。

基本使用：

// 一個組件
// 通過函數參數來接收 props（）
const Module = (props) => {console.log(props);// 注意 prpos 是只讀的對象，直接操作會報錯// props.size = 30;return (<div><p>組件</p>{/* <img src={props.imgUrl} width={props.size} alt="" /> */}<img src={imgUrl} width={size} alt="" /></div>);
};

使用組件：

給組件傳遞 props（注意：如果要給組件傳遞非字符串類型的數據，要使用 {} 來傳遞）

//  react 中的 props 的使用
const App = () => {return (<div><p>使用</p><Modulesize={200}imgUrl="https://p3-passport.byteimg.com/img/user-avatar/732186508929940c0ea6978021bc9f76~100x100.awebp"></Module></div>);
};export default App;

通過解構簡化使用 ，還可以再此處賦初始值

const Module = ({ imgUrl, size = 50 }) => {return (<div><p>組件</p><img src={imgUrl} width={size} alt="" /></div>);
};

完整解釋代碼

// 一個組件
// 通過函數參數來接收 props（）
// const Module = (props) => {// 通過解構簡化，可以再此處賦初始值
const Module = ({ imgUrl, size = 50 }) => {// console.log(props);// 注意 prpos 是只讀的對象，直接操作會報錯// props.size = 30;return (<div><p>組件</p>{/* <img src={props.imgUrl} width={props.size} alt="" /> */}<img src={imgUrl} width={size} alt="" /></div>);
};//  react 中的 props 的使用
const App = () => {return (<div><p>123</p>{/* 給組件傳遞 props（注意：如果要給組件傳遞非字符串類型的數據，要使用 {} 來傳遞） */}<Modulesize={200}imgUrl="https://p3-passport.byteimg.com/img/user-avatar/732186508929940c0ea6978021bc9f76~100x100.awebp"></Module></div>);
};export default App;