第十五篇 描述UI-将props传递给组件
将props传递给组件
React 组件使用 props 相互通信。 每个父组件都可以通过给它们 props 将一些信息传递给它的子组件。 Props 可能会让您想起 HTML 属性，但您可以通过它们传递任何 JavaScript 值，包括对象、数组和函数。
你将学习
- 如何将props传递给组件
- 如何从组件中读取 props
- 如何为props指定默认值
- 如何将一些 JSX 传递给组件
- props如何随时间变化
熟悉的props
props是您传递给 JSX 标签的信息。 例如，className、src、alt、width 和 height 是您可以传递给 <img> 的一些props：
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 />
);
}
您可以传递给 <img> 标签的props是预定义的（ReactDOM 符合 HTML 标准）。 但是您可以将任何props传递给您自己的组件，例如 <Avatar>，以自定义它们。 就像上面这样！
将props传递给组件
在这段代码中，Profile 组件没有将任何 props 传递给它的子组件 Avatar：
export default function Profile() {
return (
<Avatar />
);
}
你可以分两步给Avatar一些props。
第 1 步：将 props 传递给子组件
首先，将一些props传递给 Avatar。 例如，让我们传递两个 props：person（一个对象）和 size（一个数字）：
export default function Profile() {
return (
<Avatar
person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
size={100}
/>
);
}
如果 person= 之后的双花括号让你感到困惑，请记住它们只是 JSX 花括号内的一个对象。
现在您可以在 Avatar 组件中读取这些props。
第 2 步：读取子组件内部的 props
您可以通过直接在函数 Avatar 之后列出它们的名称 person、size 并在内部用逗号分隔（{ 和 }）来阅读这些props，这使您可以在 Avatar 代码中使用它们，就像使用变量一样。
function Avatar({ person, size }) {
// person and size are available here
}
向 Avatar 添加一些使用 person 和 size 属性进行渲染的逻辑，就完成了。
现在，您可以将 Avatar 配置为使用不同的props以多种不同的方式呈现。 尝试调整值！
utils.js
export function getImageUrl(person, size = 's') {
return (
'https://i.imgur.com/' +
person.imageId +
size +
'.jpg'
);
}
app.js
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>
);
}
Props 让您独立地考虑父组件和子组件。 例如，您可以在 Profile 中更改人物或尺寸props，而无需考虑 Avatar 如何使用它们。 同样，您可以更改 Avatar 使用这些props的方式，而无需查看 Profile。
你可以把props想象成你可以调整的“旋钮”。 它们的作用与参数对函数的作用相同——事实上，props 是组件的唯一参数！ React 组件函数接受一个参数，一个 props 对象：
function Avatar(props) {
let person = props.person;
let size = props.size;
// ...
}
通常你不需要整个 props 对象本身，所以你将它解构为单独的 props。
"陷阱
声明props时，不要省略( 和 ) 内的一对 { 和 } ：
function Avatar({ person, size }) { // ... }这种语法称为“解构”，相当于从函数参数中读取属性：
function Avatar(props) { let person = props.person; let size = props.size; // ... }
为prop指定默认值
如果你想给一个 prop 一个默认值以在没有指定值时返回，你可以使用解构通过在参数后面放置 = 和默认值来实现：
function Avatar({ person, size = 100 }) {
// ...
}
现在，如果 <Avatar person={...} /> 渲染时没有使用 size 属性，则大小将设置为 100。
默认值仅在缺少 size 属性或传递 size={undefined} 时使用。 但如果您传递 size={null} 或 size={0}，则不会使用默认值。
使用 JSX 展开语法传递 props
有时，传递props会变得非常重复：
function Profile({ person, size, isSepia, thickBorder }) {
return (
<div className="card">
<Avatar
person={person}
size={size}
isSepia={isSepia}
thickBorder={thickBorder}
/>
</div>
);
}
重复代码没有错——它可以更易读。 但有时您可能会看重简洁。 一些组件将他们所有的道具转发给他们的孩子，就像这个 Profile 如何处理 Avatar 一样。 因为他们不直接使用任何props，所以使用更简洁的“展开”语法是有意义的：
function Profile(props) {
return (
<div className="card">
<Avatar {...props} />
</div>
);
}
这会将 Profile 的所有 props 转发给 Avatar，但不会列出它们的每个名称。
有节制地使用扩展语法。 如果你在所有其他组件中使用它，那就是错误的。 通常，它表示您应该拆分组件并将子组件作为 JSX 传递。 接下来会详细介绍！
作为孩子传递 JSX
嵌套内置浏览器标签很常见：
<div>
<img />
</div>
有时您会希望以相同的方式嵌套自己的组件：
<Card>
<Avatar />
</Card>
当您将内容嵌套在 JSX 标签中时，父组件将在名为 children 的 prop 中接收该内容。 例如，下面的 Card 组件将接收一个设置为 <Avatar /> 的 children 属性并将其呈现在包装器 div 中：
utils.js
export function getImageUrl(person, size = 's') {
return (
'https://i.imgur.com/' +
person.imageId +
size +
'.jpg'
);
}
Avatar.js
import { getImageUrl } from './utils.js';
export default function Avatar({ person, size }) {
return (
<img
className="avatar"
src={getImageUrl(person)}
alt={person.name}
width={size}
height={size}
/>
);
}
App.js
import Avatar from './Avatar.js';
function Card({ children }) {
return (
<div className="card">
{children}
</div>
);
}
export default function Profile() {
return (
<Card>
<Avatar
size={100}
person={{
name: 'Katsuko Saruhashi',
imageId: 'YfeOqp2'
}}
/>
</Card>
);
}
尝试用一些文本替换 <Card> 内的 <Avatar> 以查看 Card 组件如何包装任何嵌套内容。 它不需要“知道”它内部正在渲染什么。 你会在很多地方看到这种灵活的模式。
您可以将具有 children prop 的组件视为具有“孔”，可以由其父组件使用任意 JSX “填充”。 您将经常使用 children 道具来进行视觉包装：面板、网格等。
props如何随时间变化
下面的时钟组件从其父组件接收两个props：颜色和时间。 （父组件的代码被省略了，因为它使用了状态，我们暂时不会深入研究。）
尝试在下面的选择框中更改颜色：
export default function Clock({ color, time }) {
return (
<h1 style={{ color: color }}>
{time}
</h1>
);
}
此示例说明组件可能会随时间接收不同的props。 props并不总是静止的！ 在这里，时间属性每秒都在变化，颜色属性会在您选择另一种颜色时发生变化。 props 反映组件在任何时间点的数据，而不仅仅是在开始时。
然而，props是不可变的——计算机科学中的一个术语，意思是“不可改变的”。 当组件需要更改其 props 时（例如，响应用户交互或新数据），它将不得不“请求”其父组件向其传递不同的 props——一个新对象！ 它的旧props将被丢弃，最终 JavaScript 引擎将回收它们占用的内存。
不要试图“改变props”。 当您需要响应用户输入（如更改所选颜色）时，您将需要“设置states”，您可以在状态：组件的内存中了解这一点。
回顾
- 要传递props，将它们添加到 JSX，就像使用 HTML 属性一样。
- 要读取props，请使用函数 Avatar({ person, size }) 解构语法。
- 您可以指定一个默认值，如 size = 100，用于缺少和未定义的props。
- 你可以使用 <Avatar {...props} /> JSX 展开语法转发所有props，但不要过度使用它！
- 像 <Card><Avatar /></Card> 这样的嵌套 JSX 将作为 Card 组件的子属性出现。
- props是时间上的只读快照：每次渲染都会收到一个新版本的props。
- 你不能改变props。 当你需要交互时，你需要设置状态。
