文章目录
react版本 v16.8.4
1 接收类组件外部的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>props</title>
</head>
<body>
<!--1.准备好容器-->
<div id="root"></div>
<!--2.引入js文件-->
<script type="application/javascript" src="../js/react.development.js"></script>
<script type="application/javascript" src="../js/react-dom.development.js"></script>
<script type="application/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//3.1 创建组件
class MyComponent extends React.Component{
render(){
console.log("类中render this=",this);
return (
<ul>
<li>姓名:{this.props.name}</li>
<li>性别:{this.props.sex}</li>
<li>年龄:{this.props.age}</li>
</ul>
)
}
}
const person = {name:"tom", sex:"女", age:"18"}
//3.2 渲染组件到页面
//直接从类的外部给类的实例对象赋值
//而且赋值都传到类的实例对象的props属性上面 props: {},
ReactDOM.render(<MyComponent name={person.name} sex={person.sex} age={person.age}/>, document.getElementById("root"))
</script>
</body>
</html>
- 如果person的属性比较多,有个语法糖写法: 展开运算符 {…person}
ReactDOM.render(<MyComponent {...person}/>, document.getElementById("root"))
前提是后台返回的数据和类组件的属性的名字是一样的,否则不能这么写;
- 展开运算符在js中不能用于对象,只能用于数组
- react此处展开运算符可以使用的原因是因为 react.js + babel,允许在react里面对对象使用展开运算符,并且仅仅用于标签属性的传递,仅用于标签内。
2. JavaScrip中的展开运算符 …
- 展开数组 和 连接数组
let arr01 = [1,3,5];
let arr02 = [2,4,6];
let arr03 = [...arr01,...arr02];
console.log("数组 arr01="arr01);
console.log("展开运算符 arr01",...arr01);
console.log("展开运算符连接数组 ", arr03);
let person01 = {name:"tom", age:18};
输出结果:
- 构造字面量对象(复制对象)
let person01 = {name:"tom", age:18}
//构造字面量对象
let person02 = {...person01};
console.log("person02= ",person02);
person01.name="jerry";
console.log("修改后 person01=",person01);
console.log("修改后 person02=",person02);
- 复制对象、改变对象的属性、添加新属性
let person01 = {name:"tom",age:18};
let person02 = {...person01,name:"jerry",address:"东莞"};
console.log("person01=",person01);
console.log("person02=",person02);
输出结果如下:
3. 限定props数据的属性
3.1 使用PropTypes限定属性
- 使用prop-types.js
- 截至15.x版本使用的是React.PropTypes
- 16.x+版本把PropTypes从React中分离出去,需要单独引入js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>props</title>
</head>
<body>
<!--1.准备好容器-->
<div id="root"></div>
<!--2.引入js文件-->
<script type="application/javascript" src="../js/react.development.js"></script>
<script type="application/javascript" src="../js/react-dom.development.js"></script>
<script type="application/javascript" src="../js/babel.min.js"></script>
<script type="application/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
//3.1 创建组件
class MyComponent extends React.Component{
render(){
console.log("类中render this=",this);
return (
<ul>
<li>姓名:{this.props.name}</li>
<li>性别:{this.props.sex}</li>
<li>年龄:{this.props.age}</li>
</ul>
)
}
}
MyComponent.propTypes = {
//这种写法支持15.x及其以下版本;在react16.x及其以上版本弃用
// name:React.PropTypes.string.isRequired
//16.x+版本把PropTypes从React中分离出去,需要单独引入js prop-types.js
name:PropTypes.string.isRequired
};
const person = {name:"tom", sex:"女", age:"18"}
//3.2 渲染组件到页面
//直接从类的外部给类的实例对象赋值
//而且赋值都传到类的实例对象的props属性上面 props: {},
//ReactDOM.render(<MyComponent name={person.name} sex={person.sex} age={person.age}/>, document.getElementById("root"))
ReactDOM.render(<MyComponent {...person}/>, document.getElementById("root"))
</script>
</body>
</html>
3.2 PropTypes可用限定属性
- string 字符串类型
- number 数值类型
- isRequired 必填
- func 必须是函数类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>props</title>
</head>
<body>
<!--1.准备好容器-->
<div id="root"></div>
<div id="root2"></div>
<!--2.引入js文件-->
<script type="application/javascript" src="../js/react.development.js"></script>
<script type="application/javascript" src="../js/react-dom.development.js"></script>
<script type="application/javascript" src="../js/babel.min.js"></script>
<script type="application/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
//3.1 创建组件
class MyComponent extends React.Component{
render(){
console.log("类中render this=",this);
return (
<ul>
<li>姓名:{this.props.name}</li>
<li>性别:{this.props.sex}</li>
<li>年龄:{this.props.age}</li>
</ul>
)
}
}
MyComponent.propTypes = {
//这种写法支持15.x及其以下版本;在react16.x及其以上版本弃用
// name:React.PropTypes.string.isRequired
//16.x+版本把PropTypes从React中分离出去,需要单独引入js prop-types.js
name:PropTypes.string.isRequired,
sex:PropTypes.string,
age:PropTypes.number
};
//设置默认值
MyComponent.defaultProps = {
sex:"不详",
age:16
};
function speak(){
console.log("speak方法....");
}
const person = {name:"tom", sex:"女", age:18};
const person02 = {name:"Jerry", speak:speak};
//3.2 渲染组件到页面
//直接从类的外部给类的实例对象赋值
//而且赋值都传到类的实例对象的props属性上面 props: {},
//ReactDOM.render(<MyComponent name={person.name} sex={person.sex} age={person.age}/>, document.getElementById("root"))
ReactDOM.render(<MyComponent {...person}/>, document.getElementById("root"))
ReactDOM.render(<MyComponent {...person02}/>, document.getElementById("root2"))
</script>
</body>
</html>
输出结果如下:
提示有警告,
修改默认值 age:16
输出结果如下:
没有任何警告和错误
3.3 使用限定只是警告并非报错
3.4 props限定的属性都是只读的,无法修改
4. props属性的限定简写
- props限定的是类组件属性的格式或者默认值,可以写在类组件里面;
- 但是不能像state那样简写,state的简写是把state挂在类的实例上面;
- 应该把props挂靠在类的原型上,这里使用一个关键字 static
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>props</title>
</head>
<body>
<!--1.准备好容器-->
<div id="root"></div>
<div id="root2"></div>
<!--2.引入js文件-->
<script type="application/javascript" src="../js/react.development.js"></script>
<script type="application/javascript" src="../js/react-dom.development.js"></script>
<script type="application/javascript" src="../js/babel.min.js"></script>
<script type="application/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
//3.1 创建组件
class MyComponent extends React.Component{
render(){
console.log("类中render this=",this);
return (
<ul>
<li>姓名:{this.props.name}</li>
<li>性别:{this.props.sex}</li>
<li>年龄:{this.props.age}</li>
</ul>
)
}
//为类的原型上设置属性的类型限定
static propTypes = {
name:PropTypes.string.isRequired,
sex:PropTypes.string,
age:PropTypes.number
};
//在类的原型上设置默认值
static defaultProps = {
sex:"不详",
age:16
};
}
function speak(){
console.log("speak方法....");
}
const person = {name:"tom", sex:"女", age:18};
const person02 = {name:"Jerry", speak:speak};
//3.2 渲染组件到页面
//直接从类的外部给类的实例对象赋值
//而且赋值都传到类的实例对象的props属性上面 props: {},
//ReactDOM.render(<MyComponent name={person.name} sex={person.sex} age={person.age}/>, document.getElementById("root"))
ReactDOM.render(<MyComponent {...person}/>, document.getElementById("root"))
ReactDOM.render(<MyComponent {...person02}/>, document.getElementById("root2"))
</script>
</body>
</html>
5. 类式组件中构造器和props(了解)
- 类式组件构造器可以完全省略
- 如果不省略构造器,react官方给出的实例是如下:
constructor(props) {
super(props);
// 不要在这里调用 this.setState()
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);
}
就是把props传入super()函数
- 如果props不传入构造函数中::
constructor() {
super();
// 不要在这里调用 this.setState()
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);
}
结果不会报错,但是有个区别
如果不传入props,那么在构造器中,this.props = undefined ;
如果不需要在构造器中使用this.props,可以完全不传入props,构造器都不用写;
6. 函数式组件使用props
- 函数式组件能够使用props,因为函数可以接受参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>props</title>
</head>
<body>
<!--1.准备好容器-->
<div id="root"></div>
<div id="root2"></div>
<!--2.引入js文件-->
<script type="application/javascript" src="../js/react.development.js"></script>
<script type="application/javascript" src="../js/react-dom.development.js"></script>
<script type="application/javascript" src="../js/babel.min.js"></script>
<script type="application/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
//3.1 创建函数式组件
function Person_func(props){
const {name,sex,age} = props
return (
<ul>
<li>姓名:{name}</li>
<li>性别:{sex}</li>
<li>年龄:{age}</li>
</ul>
)
}
Person_func.propTypes = {
name:PropTypes.string.isRequired,
sex:PropTypes.string,
age:PropTypes.number
};
//设置函数式默认值
Person_func.defaultProps = {
sex:"不详",
age:16
};
function speak(){
console.log("speak方法....");
}
const person = {name:"tom", sex:"女", age:18};
const person02 = {name:"Jerry", speak:speak};
//3.2 渲染组件到页面
ReactDOM.render(<Person_func {...person}/>, document.getElementById("root"))
ReactDOM.render(<Person_func {...person02}/>, document.getElementById("root2"))
</script>
</body>
</html>