React 组件使用 props 相互通信。每个父组件都可以通过为其子组件提供道具来将一些信息传递给子组件。Props 可能会让您想起 HTML 属性，但您可以通过它们传递任何 JavaScript 值，包括对象、数组和函数。

Props 是传递给 JSX 标签的信息。例如，、、、、和是您可以传递给 ：classNamesrcaltwidthheight<img>

function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/1bX5QH6.jpg"
      alt="Lin Lanying"
      width={100}
      height={100}
    />
  );
}

export default function Profile() {
  return (
    <Avatar />
  );
}

可以传递给标签的 prop 是预定义的（ReactDOM 符合 HTML 标准）。但是你可以将任何道具传递给自己的组件，比如 ，来自定义它们。就是这样！<img><Avatar>

将道具传递给组件

在此代码中，组件不会将任何 props 传递给其子组件：ProfileAvatar

export default function Profile() {
  return (
    <Avatar />
  );
}

你可以分两步给出一些道具。Avatar

第 1 步：将 props 传递给子组件

首先，将一些道具传递给 .例如，让我们传递两个道具：（一个对象）和（一个数字）：Avatarpersonsize

export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

第 2 步：读取子组件内的 props

您可以通过列出它们的名称来阅读这些道具，这些道具在内部和后面用逗号分隔。这使您可以在代码中使用它们，就像使用变量一样。person, size({})function AvatarAvatar

function Avatar({ person, size }) {
  // person and size are available here
}

添加一些逻辑，使用 和 props 进行渲染，就完成了。Avatarpersonsize

现在，您可以配置为使用不同的道具以多种不同的方式进行渲染。尝试调整值！Avatar

import { getImageUrl } from './utils.js';

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

export default function Profile() {
  return (
    <div>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi', 
          imageId: 'YfeOqp2'
        }}
      />
      <Avatar
        size={80}
        person={{
          name: 'Aklilu Lemma', 
          imageId: 'OKS67lh'
        }}
      />
      <Avatar
        size={50}
        person={{ 
          name: 'Lin Lanying',
          imageId: '1bX5QH6'
        }}
      />
    </div>
  );
}

export function getImageUrl(person, size = 's') {
  return (
    'https://i.imgur.com/' +
    person.imageId +
    size +
    '.jpg'
  );
}