React 入门：组件实例三大属性之props
文章目录
- props 介绍
- 代码准备
- 定义支持 props 的组件
- 函数式组件的 props
- 类式组件的 props
- 渲染（调用）组件
- props 的特点
- 限制组件标签属性
- 指定组件标签属性的默认值
- 完整代码（props 标准写法）
- props 简写方式
props 介绍
- 从 React 组件内部来讲，组件从概念上类似于 JavaScript 函数，它接受任意的入参，传入的参数就是
props。 - 从组件外部，也就是调用组件时，React 会将 JSX 所接收的属性以及子组件转换为单个对象传递给组件，这个对象就称之为 props。
代码准备
先准备一个基础 html 代码结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数式组件的props基本使用</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="app"></div>
<!-- step01: 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- step02: 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- step03: 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel"> /* 此处一定要写babel */
</script>
</body>
</html>
下文的代码片段都可以添加到上面的基础代码中，来运行以验证结果。
定义支持 props 的组件
函数式组件的 props
函数组件接收唯一带有数据的 props 对象，由于函数式组件本质上就是 JavaScript 的函数，所以可以把 props 理解成函数的传入一个对象类型的参数的情况，并把 props 这个唯一参数作为函数组件的属性。
示例代码：
<script type="text/babel"> /* 此处一定要写babel */
// 1. 创建函数式组件
function Person(props) {
const {name, age, sex} = props
return (
<ul>
<li>姓名：{name}</li>
<li>年龄：{age} 岁</li>
<li>性别：{sex}</li>
</ul>
)
}
</script>
注意：函数式组件定义时，必须显式定义 props 参数（属性）。
类式组件的 props
示例代码：
<script type="text/babel"> /* 此处一定要写babel */
// 1. 创建类式组件
class Person extends React.Component {
render() {
const {name,sex,age} = this.props;
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age}</li>
</ul>
);
}
}
</script>
注意：类式组件不是必须显式定义 props 属性。
渲染（调用）组件
- 写法一
<script type="text/babel"> /* 此处一定要写babel */
// 渲染组件到页面
const p = { name: 'tom', age: 18, sex: '女'};
ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex} />, document.getElementById('app'));
</script>
- 写法二
<script type="text/babel"> /* 此处一定要写babel */
// 渲染组件到页面
const p = { name: 'tom', age: 18, sex: '女'};
ReactDOM.render(<Person {...p} />, document.getElementById('app'));
</script>
渲染原理：React 渲染组件 Person 组件时，把 Person 的三个属性 name、age、sex，转化为单个对象 {name: 'tom', age: 18, sex: '女'} 传给组件，这个是对象就是 Person 组件的 props。
props 的特点
- 只读性
组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。
// 下面这行代码是错误的，
// 运行时控制台会报错：Uncaught TypeError: Cannot assign to read only property 'age' of object
this.props.age = 100;
- 避免将 props 的值复制给 state。
限制组件标签属性
不同的组件标签属性，可能值的类型不同。如果你写的组件，他人使用，可能会输入的值不符合预期。所以我们就需要对组件标签属性的值进行限制。
比如，我们需要对上面的组件标签属性进行限制如下：
- 姓名 name：必须为字符串且必传
- 性别 sex: 必须为字符串，
- 年龄 age: 必须为数值，
代码实现如下：
<!--需要引入 prop-types 类库，用于对组件标签属性进行限制 -->
<script type="text/javascript" src="../js/prop-types.js"></script>
// 下面的代码就是对标签属性的限制，这端代码要写到标签代码块之外。
Person.propTypes = {
name: PropTypes.string.isRequired, // 限制name必传，且为字符串
sex: PropTypes.string, // 限制sex为字符串
age: PropTypes.number, // 限制age为数字
};
添加上面的代码后，把属性的值设置为不符合限制的值，浏览器控制台就会出现相应的警告类型的错误。
指定组件标签属性的默认值
除了对标签属性的限制，可能我们还需要给一些属性提供默认值。
最常见的比如人的性别，一般都会有默认值，默认“未知”、“保密”或“男”。
当然某些场景，我们也可以给年龄设置默认值，比如默认 18.
代码实现如下：
<!--需要引入 prop-types 类库，用于对组件标签属性设置默认值-->
<script type="text/javascript" src="../js/prop-types.js"></script>
// 下面的代码就是给标签属性的设置默认值，这端代码要写到标签代码块之外。
Person.defaultProps = {
sex: "未知", // sex默认值为“未知”
age: 18, // age默认值为18
};
完整代码（props 标准写法）
以类式组件为例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类式组件的props基本使用</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="app"></div>
<!-- step01: 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- step02: 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- step03: 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- step04: 引入 prop-types，用于对组件标签属性进行限制 -->
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel"> /* 此处一定要写babel */
// 1. 创建类式组件
class Person extends React.Component {
render() {
const {name,sex,age} = this.props;
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age}</li>
</ul>
);
}
}
// 对标签属性进行类型和必填限制
Person.propTypes = {
name: PropTypes.string.isRequired, // 限制name必传，且为字符串
sex: PropTypes.string, // 限制sex为字符串
age: PropTypes.number // 限制age为数字
}
// 给标签属性设置默认值
Person.defaultProps = {
sex: '未知', // sex默认值为“未知”
age: 18 // age默认值为18
}
// 渲染组件到页面
const p = { name: 'Tom', age: 18, sex: '女'};
// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex} />, document.getElementById('app'));
ReactDOM.render(<Person {...p} />, document.getElementById('app'));
</script>
</body>
</html>
props 简写方式
特别说明：函数式组件不支持简写方式。
上面的完整代码示例，美中不足的是，对组件标签属性的限制写到了组件外部，感觉不是太美观，也不便于维护。所以根据 JavaScript 类的static的特性，来规范简化 props 的编码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类式组件的props基本使用</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="app"></div>
<!-- step01: 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- step02: 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- step03: 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- step04: 引入 prop-types，用于对组件标签属性进行限制 -->
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel"> /* 此处一定要写babel */
// 1. 创建类式组件
class Person extends React.Component {
// 对标签属性进行类型和必填限制
static propTypes = {
name: PropTypes.string.isRequired, // 限制name必传，且为字符串
sex: PropTypes.string, // 限制sex为字符串
age: PropTypes.number // 限制age为数字
}
// 给标签属性设置默认值
static defaultProps = {
sex: '未知', // sex默认值为“未知”
age: 18 // age默认值为18
}
render() {
const {name,sex,age} = this.props;
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age}</li>
</ul>
);
}
}
// 渲染组件到页面
const p = { name: 'Tom', age: 19, sex: '女'};
// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex} />, document.getElementById('app'));
ReactDOM.render(<Person {...p} />, document.getElementById('app'));
</script>
</body>
</html>
在 JavaScript 的类中，通过关键字 static 定义的属性，可以通过类名直接访问。
代码示例：class Car { static wheel = 4; } // 可以如下访问 wheel console.log(Car.wheel); // 控制台输出：4