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' ); }
