- Objective:
- Breadcrumb:
# 概念阐释
## 语法
每个组件都有 props，props 是一个对象，掌握了关于组件的数据。React中的Props是单向传递的，从顶部到底部，从父级传递到子级的不变数据。这意味着如果想要添加新的props值，必须从它的父级添加。
## 语义
```jsx
<button type="submit" value="Submit"> Submit </button>
// 将函数作为props的值传递,用大括号包含
<button foo={bar} />
```
`type`和`value`是`<button>`的属性，访问 props 对象：`props.name`。
# 实例
## 获取 props 的 JSON 数据
```jsx
// App.js
import React from 'react';
import ReactDOM from 'react-dom';
import PropsDisplayer from './PropsDisplayer';
function App() {
return <PropsDisplayer myProp="Hello" />;
}
export default App;
```
```jsx
//PropsDisplayer
import React from 'react';
function PropsDisplayer(props) {
const stringProps = JSON.stringify(props);
return (
<div>
<h1>CHECK OUT MY PROPS OBJECT</h1>
<h2>{stringProps}</h2>
</div>
);
}
export default PropsDisplayer;
```
- App.js是父组件
- `props`作为 `PropsDisplayer` 的参数传入
- `stringProps` 将 js 转换为 JSON 格式
- 在`<h2>`中渲染`stringProps`的结果
## 访问props对象
```jsx
//App.js
import React from 'react';
import Product from './Product'
function App() {
return <Product name="iphone" price = {999} rating = "5.0/5.0" />;
}
export default App;
//在 product 中定义了 name,price,rating属性
```
```jsx
// Product.js
import React from 'react';
function Product(props) { //也可以直接写成（{name,price,rating}）
return (
<div>
<h1>{props.name}</h1>
<h2>{props.price}</h2>
<h3>{props.rating}</h3>
</div>
);
}
export default Product;
```
# 相关内容
## 注意事项
除了 string 外，其他的新型都需要包裹在大括号`{}`内。
```js
<Greeting myInfo={["Astronaut", "Narek", "43"]} />
<Greeting name="The Queen Mary" city="Long Beach, California" age={56} haunted={true} />
```
所以父级包括子级的组件函数和对应的 props 名和值，子级包括 JSX 元素和 props.来自父级的 props 名称。
# 参考资料
- [props-codecademy](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-ii/modules/wdcp-22-components-interacting-218cf398-22f2-4666-97bc-52d6789f0a78/lessons/this-props/exercises/access-props)