props

什么是 props

props 是 React 中提供的将数据从父组件传递到子组件的机制，是父子组件通信的一种方式。

在 React 中 props 是只读的，子组件不能修改 props，以保证数据的单向流动。

基本用法

在父组件中，通过在子组件标签上添加属性的方式传递数据。

在子组件中，通过 props 对象获取父组件传递的数据。

function Person(props: { name: string; age: number; gender: string }) {
    return (
        <div>
            <h2>Name: {props.name}</h2>
            <h2>Age: {props.age}</h2>
            <h2>Gender: {props.gender}</h2>
        </div>
    );
}

export default function PropsBasic() {
    return (
        <>
            <Person name="John" age={25} gender="male" />
        </>
    );
}

解构赋值

在子组件中，可以使用解构赋值的方式获取 props 中的数据。

function Person({ name, age }: { name: string; age: number }) {
    return (
        <div>
            <h2>Name: {name}</h2>
            <h2>Age: {age}</h2>
        </div>
    );
}

export default function PropsDeconstruct() {
    return <Person name="Tom" age={30} />;
}

传递函数

除了传递数据，还可以通过 props 传递函数，实现父子组件之间的通信。

import { useState } from "react";

function CountButton(props: {
    count: number;
    setCount: (count: number) => void;
}) {
    return (
        <button onClick={() => props.setCount(props.count + 1)}>
            Click Add Count: {props.count}
        </button>
    );
}

export default function PropsFn() {
    const [count, setCount] = useState(0);

    return (
        <>
            <CountButton count={count} setCount={setCount} />
        </>
    );
}

剩余参数

在子组件中，可以使用剩余参数的方式获取除了指定的 props 之外的其他 props。

function Person({ name, ...props }: { name: string; [key: string]: any }) {
    return (
        <div>
            <h2>Name: {name}</h2>
            {props.age && <h2>Age: {props.age}</h2>}
            {props.gender && <h2>Gender: {props.gender}</h2>}
            {props.email && <h2>Email: {props.email}</h2>}
        </div>
    );
}

export default function PropsRest() {
    return <Person name="John" age={18} gender="male" />;
}

默认值

在子组件中，可以给 props 设置默认值，当父组件没有传递该 props 时，使用默认值。

function Person({ name, age = 18 }: { name: string; age?: number }) {
    return (
        <div>
            <h2>Name: {name}</h2>
            <h2>Age: {age}</h2>
        </div>
    );
}

export default function PropsDefault() {
    return <Person name="John" />;
}