React之props 修订版本明细

源

采纳

编辑于 24天前

半兽人

React之props

React

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

`props` 的核心概念

只读性：props 是只读的，子组件不能直接修改传入的 props。如果需要改变数据，通常是通过父组件的状态（state）更新或通过回调函数通知父组件。
任意类型：props 可以是任何 JavaScript 值，包括字符串、数字、对象、数组、函数甚至 JSX。
默认传递：如果没有显式传递 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` 的常见用途

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

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

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

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

function Button) => alert) => alert("Button clicked!");
  return <Button onClick={handleClick} />;
}

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

function Button) => alert("Button clicked!");
  return <Button onClick={handleClick} />;
}

function Button({ onClick) => alert) => alert("Button clicked!");
  return <Button onClick={handleClick} />;
}

function Button({ onClick }) {
  return) => alert("Button clicked!");
  return <Button onClick={handleClick} />;
}

function Button({ onClick alert) => alert("Button clicked!");
  return <Button) => alert("Button clicked!");
  return <Button onClick) => alert("Button clicked!");
  return <Button) => alert("Button clicked!");
  return <Button) => alert("Button clicked!");
  return <Button onClick) => alert("Button clicked!");
  return <Button onClick) => alert("Button clicked!");
  return <Button onClick) => alert("Button clicked!");
  return <Button onClick) => alert("Button clicked!");
  return <Button onClick) => alert("Button clicked!");
  return <Button onClick) => alert("Button clicked!");
  return <Button onClick={handleClick} />;
}

function Button({ onClick alert) => alert("Button clicked!");
  return <Button onClick={handleClick} />;
}

function Button({ onClick }) {
  return <button onClick={onClickalert("Button clicked!");
  return <Button onClick) => alert("Button clicked!");
  return <Button onClick={handleClick} />;
}

function Button({ onClick }) {
  return alert("Button clicked!");
  return <Button onClick={handleClick} />;
}

function Button({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
}

传递子节点（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 {
  usernameace UserProps {
  username: string

constinterface UserProps {
  username: string;
  email: stringinterface UserProps {
  username: string;
  email: stringinterface UserProps {
  usernamering;
  emailinterface UserProps {
  username: string;
  email: string;
}

const UserCardace UserProps {
  username: string;
  email: stringinterface UserProps {
  username: string;
  email: string;
}

const UserCardinterfaceace UserPropsinterface UserProps {
  username: string;
  email: string;
}

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

const UserCard: FC<UserPropsinterface UserProps {
  username: string;
  email: string;
}

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

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

const UserCardinterface UserProps {
  username: string;
  email: string;
}

constinterface UserProps {
  usernameame: stringinterface UserProps {
  username: string;
  email: string;
}

constinterfaceface UserPropsinterface UserProps {
  username: string;
  email: string;
}

constinterface UserProps {
  username: string;
  emailinterface UserProps {
  username: string;
  email: string;
}

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

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

constinterface UserProps {
  username: string;
  email: stringinterface UserProps {
  usernamering;
  emailg;
}

const UserCardrd: FCops> = ({ usernameinterface UserProps {
  username: string;
  email: string;
}

const UserCard: FC<UserProps> = ({ username, email }) => {
  return (
    <div>
      <pinterface UserProps {
  username: string;
  email: stringinterface UserProps {
  username: string;
  email: stringinterface UserProps {
  username: string;
  email: string;
}

constinterface UserProps {
  username: string;
  email: stringinterface UserProps {
  username: string;
  email: string;
}

const UserCardinterface UserProps {
  username: string;
  email: string;
}

const UserCardinterfaceface UserPropsinterface UserProps {
  username: string;
  email: string;
}

const UserCardinterface UserProps {
  username: string;
  email: stringinterface UserProps {
  username: string;
  email: string;
}

constinterface UserProps {
  username: string;
  email: stringinterface 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 组件通信的基础。

预览

React之props

props 的核心概念

使用示例

解构 props

props 的常见用途

在 TypeScript 中的 props

总结

`props` 的核心概念

解构 `props`

`props` 的常见用途

在 TypeScript 中的 `props`