ReactJS - Props 概述

ReactJS - 理解 Props

Props（“properties” 的缩写）是 React 中的一个基本概念。它们允许您将数据从父组件传递给子组件。Props 的一个关键特性是它们在接收组件内是不可变的（immutable）；组件不能改变自己的 props。这种单向数据流有助于使应用程序更易于理解和调试。容器组件（或父组件）通常管理 state（状态），state 可以被更新，然后将部分 state 作为 props 传递给子组件。

在函数组件中使用 Props

当您需要将静态或动态数据传递给组件时，将其定义为 JSX 元素上的属性。在函数组件内部，这些 props 作为第一个参数接收，通常是一个对象。

App.jsx（子组件）

import React from 'react';

// 'props' is an object containing all passed attributes
// 'props' 是一个包含所有传递属性的对象
function App(props) {
    return (
        <div>
            <h1>{props.headerProp}</h1>
            <h2>{props.contentProp}</h2>
        </div>    );
}

export default App;

main.js（或 index.js - 入口文件）

import React from 'react';
import ReactDOM from 'react-dom/client'; // Updated for React 18
// 已更新以支持 React 18
import App from './App.jsx';

const container = document.getElementById('app');
const root = ReactDOM.createRoot(container); // Create a root.
// 创建一个 root。

root.render(
    <App
        headerProp="Header from props..."
        contentProp="Content from props..."
    />
);

这将渲染 App 组件，显示从 main.js 传递的 headerProp 和 contentProp 值。输出将是： Header: Header from props… Content: Content from props…

设置默认 Prop 值

您可以为 props 定义默认值。如果父组件没有提供某个 prop，将使用默认值。在函数组件中，设置默认 props 最常用的方法是使用 JavaScript 的默认参数语法。

App.jsx（带默认 Props）

import React from 'react';

function App({
    headerProp = "Default Header from props...",
    contentProp = "Default Content from props..."
}) {
    return (
        <div>
            <h1>{headerProp}</h1>
            <h2>{contentProp}</h2>
        </div>
    );
}

// Alternatively, for functional components, you can still use Component.defaultProps:
// 或者，对于函数组件，您仍然可以使用 Component.defaultProps：
/*
App.defaultProps = {
    headerProp: "Default Header from props...",
    contentProp: "Default Content from props..."
};
*/

export default App;

main.js（渲染时未传递任何 props，使用默认值）

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';

const container = document.getElementById('app');
const root = ReactDOM.createRoot(container);

root.render(<App />); // No props passed, so defaults will be used.
// 没有传递 props，将使用默认值。

输出将是默认值： Header: Default Header from props… Content: Default Content from props…

State 和 Props 的结合

React 中常见的模式是父组件持有 state 并将其作为 props 传递给子组件。当父组件的 state 改变时，React 会重新渲染父组件，进而使用新的 prop 值重新渲染子组件。

App.jsx（父组件和子组件）

import React, { useState } from 'react';

// Child Component: Header
// 子组件：Header
function Header(props) {
    return (
        <div>
            <h1>{props.headerMessage}</h1>
        </div>
    );
}

// Child Component: Content
// 子组件：Content
function Content(props) {
    return (
        <div>
            <h2>{props.contentMessage}</h2>
        </div>
    );
}

// Parent Component: App
// 父组件：App
function App() {
    const [appData, setAppData] = useState({
        header: "Header from parent state...",
        content: "Content from parent state..."
    });

    // Example of how you might update the state (e.g., after a timeout or user interaction)
    // 示例：如何更新 state（例如，超时后或用户交互后）
    /*
    setTimeout(() => {
        setAppData({
            header: "Updated Header!",
            content: "Updated Content!"
        });
    }, 3000);
    */

    return (
        <div>
            <Header headerMessage={appData.header} />
            <Content contentMessage={appData.content} />
        </div>
    );
}

export default App;

main.js（入口文件）

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';

const container = document.getElementById('app');
const root = ReactDOM.createRoot(container);

root.render(<App />);

初始输出将显示来自 appData state 的消息。如果 App 组件中的 state 更新了（例如，由于用户交互或数据获取），Header 和 Content 组件将自动使用新的 prop 值重新渲染。这演示了 state 如何作为 props 向下流动，从而实现动态 UI。