React之props

在 React 中，props 是“properties”（属性）的缩写，是 React 组件用来接收外部传递数据的一种机制。简单来说，props 是组件的输入，允许父组件向子组件传递数据或函数，从而实现组件之间的通信和复用。

props 的核心概念

1. 只读性：props 是只读的，子组件不能直接修改传入的 props。如果需要改变数据，通常是通过父组件的状态（state）更新或通过回调函数通知父组件。
2. 任意类型：props 可以是任何 JavaScript 值，包括字符串、数字、对象、数组、函数甚至 JSX。
3. 默认传递：如果没有显式传递 props，组件会接收一个空对象 {}。

使用示例

以下是一个简单的例子，展示如何通过 props 传递数据：

// 父组件
function ParentComponent() {
  const name = "Alice";
  const age = 25;

  return <ChildComponent name={name} age={age} />;
}

// 子组件
function ChildComponent(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

在这个例子中：

• ParentComponent 通过属性 name 和 age 向 ChildComponent 传递数据。
• ChildComponent 通过参数 props 接收这些数据，并用 props.name 和 props.age 访问它们。

解构 props

为了写起来更简洁，现代 React 开发中经常直接解构 props：

function ChildComponent({ name, age }) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

props 的常见用途

1. 传递数据：比如用户信息、列表项等。

   <UserCard username="Alice" email="alice@example.com" />
   

2. 传递函数：让子组件调用父组件的逻辑。

   function ParentComponent() {
     const handleClick = () => alert("Button clicked!");
     return <Button onClick={handleClick} />;
   }
   
   function Button({ onClick }) {
     return <button onClick={onClick}>Click me</button>;
   }
   

3. 传递子节点（children）：props.children 是特殊的 props，表示组件标签之间的内容。

   function Wrapper({ children }) {
     return <div>{children}</div>;
   }
   
   <Wrapper>
     <p>This is inside the wrapper!</p>
   </Wrapper>
   

在 TypeScript 中的 props

如果你用 TypeScript（就像你之前提到的 FC），需要为 props 定义类型：

interface UserProps {
  username: string;
  email: string;
}

const UserCard: FC<UserProps> = ({ username, email }) => {
  return (
    <div>
      <p>Username: {username}</p>
      <p>Email: {email}</p>
    </div>
  );
};

总结

• props 是 React 组件接收外部数据的方式，类似于函数的参数。
• 它让组件变得可复用和模块化。
• 你会经常看到它，因为它是 React 组件通信的基础。