React组件(类式)实例对象的三大属性2-props
一、props的理解
props就是组件标签上的属性,如 name , age , sex 都是props中的属性。
二、props的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsx使用react</title>
</head>
<body>
<!-- 创建一个容器 -->
<div id="test"></div>
<div id="test1"></div>
<div id="test2"></div>
<!-- 引入react核心库 -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作dom -->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 引入bable,将jsx转化为js -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 表示写的是jsx -->
<script type="text/babel">
class Person extends React.Component {
render() {
// 解构
const { name, age, sex } = this.props;
//年龄加1
return (
<ul>
<li>姓名:{name}</li>
<li>年龄:{age + 1}</li>
<li>性别:{sex}</li>
</ul>
)
}
}
//如果不使用{}那就是字符串,年龄+1之后就是131
ReactDOM.render(<Person name="tom" age="13" sex="女" />, document.getElementById('test'));
//值为数字的话需要使用{}
ReactDOM.render(<Person name="jack" age={12} sex="女" />, document.getElementById('test1'));
const p = { name: 'Dai', age: 20, sex: '男' };
//...p批量传递标签属性
ReactDOM.render(<Person {...p} />, document.getElementById('test2'));
</script>
</body>
</html>
三、对 props 进行限制
需要引入
prop-types.js
。
cdn:https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js
主要是对 propTypes(类型) 和 defaultProps(默认值) 这两个属性进行规定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsx使用react</title>
</head>
<body>
<!-- 创建一个容器 -->
<div id="test"></div>
<div id="test1"></div>
<div id="test2"></div>
<!-- 引入react核心库 -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作dom -->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 引入bable,将jsx转化为js -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 引入prop-types,对组件标签的属性进行限制 -->
<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
<!-- 表示写的是jsx -->
<script type="text/babel">
class Person extends React.Component {
render() {
// 解构
const { name, age, sex } = this.props;
// this.props.name = '123';//会报错,因为props是只读的
//年龄加1
return (
<ul>
<li>姓名:{name}</li>
<li>年龄:{age + 1}</li>
<li>性别:{sex}</li>
</ul>
)
}
}
//定义props的类型、是否必须
Person.propTypes = {
name: PropTypes.string.isRequired,//name必需,且为字符串
age: PropTypes.number,
sex: PropTypes.string,
speak: PropTypes.func,//speak是一个函数,这里要主要函数为func,不能写function
}
//定义props的默认值
Person.defaultProps = {
sex: "男",//sex默认值为男
}
function speak() {
console.log('speak')
}
ReactDOM.render(<Person name="tom" age={2} speak={speak} />, document.getElementById('test'));
ReactDOM.render(<Person name="jack" age={12} sex="女" />, document.getElementById('test1'));
const p = { name: 'Dai', age: 20, sex: '男' };
//...p批量传递标签属性
ReactDOM.render(<Person {...p} />, document.getElementById('test2'));
</script>
</body>
</html>
简写形式:
主要是将 propTypes 和 defaultProps 放到类中,使用 static 将这两个属性规定为只能被类调用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsx使用react</title>
</head>
<body>
<!-- 创建一个容器 -->
<div id="test"></div>
<div id="test1"></div>
<div id="test2"></div>
<!-- 引入react核心库 -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作dom -->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 引入bable,将jsx转化为js -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 引入prop-types,对组件标签的属性进行限制 -->
<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
<!-- 表示写的是jsx -->
<script type="text/babel">
class Person extends React.Component {
//static的作用是使它成为Person这个类的属性
//定义props的类型、是否必须
static propTypes = {
name: PropTypes.string.isRequired,//name必需,且为字符串
age: PropTypes.number,
sex: PropTypes.string,
speak: PropTypes.func,//speak是一个函数,这里要主要函数为func,不能写function
}
//定义props的默认值
static defaultProps = {
sex: "男",//sex默认值为男
}
render() {
// 解构
const { name, age, sex } = this.props;
// this.props.name = '123';//会报错,因为props是只读的
//年龄加1
return (
<ul>
<li>姓名:{name}</li>
<li>年龄:{age + 1}</li>
<li>性别:{sex}</li>
</ul>
)
}
}
function speak() {
console.log('speak')
}
ReactDOM.render(<Person name="tom" age={2} speak={speak} />, document.getElementById('test'));
ReactDOM.render(<Person name="jack" age={12} sex="女" />, document.getElementById('test1'));
const p = { name: 'Dai', age: 20, sex: '男' };
//...p批量传递标签属性
ReactDOM.render(<Person {...p} />, document.getElementById('test2'));
</script>
</body>
</html>
四、构造器中的props
构造器是否接收props,是否转递给super,取决于:是否希望在构造器中通过this访问props
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsx使用react</title>
</head>
<body>
<!-- 创建一个容器 -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作dom -->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 引入bable,将jsx转化为js -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 引入prop-types,对组件标签的属性进行限制 -->
<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
<!-- 表示写的是jsx -->
<script type="text/babel">
class Person extends React.Component {
constructor(props) {
//构造器是否接收props,是否转递给super,取决于:是否希望在构造器中通过this访问props
super(props);//使props附到实例上
console.log(this.props);//可以获取到props
}
//static的作用是使它成为Person这个类的属性
//定义props的类型、是否必须
static propTypes = {
name: PropTypes.string.isRequired,//name必需,且为字符串
age: PropTypes.number,
sex: PropTypes.string,
}
//定义props的默认值
static defaultProps = {
sex: "男",//sex默认值为男
}
render() {
// 解构
const { name, age, sex } = this.props;
//年龄加1
return (
<ul>
<li>姓名:{name}</li>
<li>年龄:{age}</li>
<li>性别:{sex}</li>
</ul>
)
}
}
ReactDOM.render(<Person name="tom" age={2} />, document.getElementById('test'));
</script>
</body>
</html>
五、函数式组件如何使用props
以上说的都是类式组件,类式组件有三大核心属性-state,props,refs,而函数式组件只可以使用props(除非使用hooks)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsx使用react</title>
</head>
<body>
<!-- 创建一个容器 -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作dom -->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 引入bable,将jsx转化为js -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 引入prop-types,对组件标签的属性进行限制 -->
<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
<!-- 表示写的是jsx -->
<script type="text/babel">
//函数式组件只能使用三大核心属性中的props(除非使用hooks)
function Person(props) {
const { name, age, sex } = props
return (
<ul>
<li>姓名:{name}</li>
<li>年龄:{age}</li>
<li>性别:{sex}</li>
</ul>
)
}
//定义props的类型、是否必须
Person.propTypes = {
name: PropTypes.string.isRequired,//name必需,且为字符串
age: PropTypes.number,
sex: PropTypes.string,
speak: PropTypes.func,//speak是一个函数,这里要主要函数为func,不能写function
}
//定义props的默认值
Person.defaultProps = {
sex: "男",//sex默认值为男
}
ReactDOM.render(<Person name="tom" age={2} />, document.getElementById('test'));
</script>
</body>
</html>
以上就是 React 组件实例对象的三大属性2-props,请大家关注《React 全家桶》专栏。
我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享,一起进步,加油。