props的基本使用
react的props的概念和vue的props概念是一样的，都是组件用来接受参数的
我们看下面的示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>hello_react</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="./js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="./js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="./js/babel.min.js"></script>
<script type="text/babel">
// 1、创建类组件
class MyComponent extends React.Component {
render() {
console.log("MyComponent", this);
return (
<ul>
<li>姓名</li>
<li>年龄</li>
<li>性别</li>
</ul>
);
}
}
// 渲染组件
const sex = "女";
ReactDOM.render(<MyComponent name="小明" age="18" sex={
sex} />, document.getElementById("test"));
</script>
</body>
</html>
MyComponent实例的props上有我们通过标签传递的参数值
那么，要使用这些值，也非常容易了。
<script type="text/babel">
// 1、创建类组件
class MyComponent extends React.Component {
render() {
const {
name, age, sex } = this.props;
return (
<ul>
<li>姓名:{
name}</li>
<li>年龄:{
age}</li>
<li>性别:{
sex}</li>
</ul>
);
}
}
// 渲染组件
const sex = "女";
ReactDOM.render(<MyComponent name="小明" age="18" sex={
sex} />, document.getElementById("test"));
</script>
页面效果：
批量传递props值
如果我们想大量传递一些props值的时候，很自然能想到这种方式
<script type="text/babel">
// 1、创建类组件
class MyComponent extends React.Component {
render() {
const {
name, age, sex } = this.props;
return (
<ul>
<li>姓名:{
name}</li>
<li>年龄:{
age}</li>
<li>性别:{
sex}</li>
</ul>
);
}
}
// 渲染组件
const info = {
name: "小明", age: 18, sex: "女" };
ReactDOM.render(<MyComponent name={
info.name} age={
info.age} sex={
info.sex} />, document.getElementById("test"));
</script>
这种写法很好理解，但是比较繁琐。react提供一种更简洁的语法糖
// 渲染组件
const info = {
name: "小明", age: 18, sex: "女" };
ReactDOM.render(<MyComponent {
...info} />, document.getElementById("test"));
但要注意，{...info}并不是我们ES6所说的拓展运算符，拓展运算符是不能展开对象的，{...info}中的括号是react的变量识别符号，不是一个对象的括号！
props类型限制
如果需要对props进行类型限制，在类组件上直接添加propTypes方法即可。
MyComponent.propTypes = {
};
如果需要对props进行默认值设置，在类组件上直接添加defaultProps方法即可。
MyComponent.defaultProps = {
};
如果我们使用非脚手架的形式创建项目，还要额外引入一个prop-types.js文件
完整的代码应该长这个样子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>hello_react</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="./js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="./js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="./js/babel.min.js"></script>
<!-- 引入组件标签类型声明文件 -->
<script type="text/javascript" src="./js/prop-types.js"></script>
<script type="text/babel">
// 1、创建类组件
class MyComponent extends React.Component {
render() {
const {
name, age, sex } = this.props;
return (
<ul>
<li>姓名:{
name}</li>
<li>年龄:{
age}</li>
<li>性别:{
sex}</li>
</ul>
);
}
}
// 对标签属性进行类型。必要性的限制
MyComponent.propTypes = {
name: PropTypes.string.isRequired, // 限制name必传，且为字符串
sex: PropTypes.string, // 限制sex为字符串
age: PropTypes.number, // 限制age为数值
speak: PropTypes.func, // 限制speak为函数（注意，不能写成function)
};
// 对标签默认值进行设置
MyComponent.defaultProps = {
sex: "男",
age: 18,
};
// 渲染组件
const info = {
name: "小明" };
ReactDOM.render(<MyComponent {
...info} />, document.getElementById("test"));
</script>
</body>
</html>
props的简写方式
给props添加类型限制，我们在组件类上添加了propTypes和defaultProps方法，事实上，我们也可以通过其他方式向类上直接添加属性。
我们先看一个简单的demo
class People {
constructor(sex) {
this.sex = sex;
}
static age = 19;
}
People.hight = "178";
const xiaoming = new People("女");
console.log("xiaoming: ", xiaoming);
通过这个示例，我们可以知道在属性前添加static关键词即可让这个属性只存在类本身。那么，props的简写也显而易见了
<script type="text/babel">
// 1、创建类组件
class MyComponent extends React.Component {
// 对标签属性进行类型。必要性的限制
static propTypes = {
name: PropTypes.string.isRequired, // 限制name必传，且为字符串
sex: PropTypes.string, // 限制sex为字符串
age: PropTypes.number, // 限制age为数值
speak: PropTypes.func, // 限制speak为函数（注意，不能写成function)
};
// 对标签默认值进行设置
static defaultProps = {
sex: "男",
age: 18,
};
render() {
const {
name, age, sex } = this.props;
return (
<ul>
<li>姓名:{
name}</li>
<li>年龄:{
age}</li>
<li>性别:{
sex}</li>
</ul>
);
}
}
// 渲染组件
const info = {
name: "小明" };
ReactDOM.render(<MyComponent {
...info} />, document.getElementById("test"));
</script>
