1.属性的定义
props 是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更
改，但是你可以通过父组件主动重新渲染的方式来传入新的 props。
这就是React中的单向数据流
2.属性的特点
属性是描述性质、特点的，组件自己不能随意更改，必须由父组件进行更改
3.属性的用法
在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为组件 props 对象的键值。
通过类创建的组件需要使用this.props来使用属性
import React, { Component } from 'react'
import Navbar from './Navbar'
export default class App extends Component {
state = {
//只能内部自己使用，外部无法改变
}
render() {
//上面父组件传来的一个对象
var obj = {
title: '测试',
leftshow: false
}
return (
<div>
<h2>首页</h2>
<Navbar title="首页" leftshow={false} ></Navbar>
<h2>列表</h2>
<Navbar title="列表" leftshow={true} rightshow={true}></Navbar>
<h2>购物车</h2>
{/* 如果对象里面的属性和组件的属性key一样可以用拓展运算符直接结构obj放入组件 */}
<Navbar title="购物车" {...obj}></Navbar>
</div>
)
}
}
import React, { Component } from 'react'
import propTypes from "prop-types"
export default class Navbar extends Component {
//a=100对象属性
state = {
//只能内部自己使用，外部无法改变
}
//用static修饰属性就是类属性
static propTypes = {
title: propTypes.string,
leftshow: propTypes.bool,
rightshow: propTypes.bool,
}
//用static修饰属性就是类属性
static defaultProps = {
//属性默认值
leftshow: true,
rightshow: true,
title: ''
}
//属性是父组件传过来的，this.props
render() {
console.log(propTypes)
let { title, leftshow, rightshow } = this.props
return (
<div style={{ display: 'flex' }}>
{leftshow && <button>返回</button>}
{/* <div>{ this.props.title}</div> */}
<div>{title}</div>
{rightshow && <button>Home</button>}
</div>
)
}
}
// Navbar.defalutProps={
// leftshow:false,
// rightshow:true,
// title:''
// }
/* Navbar.propTypes = {
title: propTypes.string,
leftshow: propTypes.bool,
rightshow: propTypes.bool,
} *///类属性
/*
给组件类加上一个propTypes属性在里面使用prop-types模块封装好的方法即可
验证属性
*/
通过函数创建的组件，需要通过函数的参数来接收 props
import React, { Component } from 'react'
import Navbar from './Navbar'
import Sidebar from './Sidebar'
export default class App extends Component {
render() {
return (
<div>
{/* 类组件 */}
<Navbar title="导航"></Navbar>
{/* 函数式组件 */}
<Sidebar bg="yellow" position="left"></Sidebar>
</div>
)
}
}
import React from 'react' import propTypes from "prop-types" export default function Sidebar(props) { console.log(props) let { bg, position } = props let obj = { backgroundColor: bg, position: "fixed" } let obj1 = { right: 0 } let obj2 = { left: 0 } // eslint-disable-next-line eqeqeq position == 'right' ? obj = { ...obj1, ...obj } : obj = { ...obj2, ...obj } return ( <div style={obj}> <ul> <li>11111</li> <li>11111</li> <li>11111</li> <li>11111</li> <li>11111</li> <li>11111</li> <li>11111</li> <li>11111</li> </ul> </div> ) } //Sidebar.defaultProps 默认属性 Sidebar.defaultProps = { bg: 'red', position: 'fixed' } //Sidebar.propTypes 属性验证 Sidebar.propTypes = { bg: propTypes.string, position: propTypes.string }
注意：
1).注意在传参数时候，如果写成isShow="true" 那么这是一个字符串 如果写成isShow={true} 这个
是布尔值
2).当你想要传递的属性key和value名字一致时，可以使用ES6的解构语法来快速赋值{...对象}
3)设置属性默认值，可以给属性设置默认值，当父组件没有传递属性时，子组件中会采用设置的默认值来使用。
在类组件和函数组件中设置属性默认值的方法是不同的
在类组件中，通过类属性defaultProps可以给属性设置默认值
//用static修饰属性就是类属性 static defaultProps = { //属性默认值 leftshow: true, rightshow: true, title: '' }
在函数组件中，通过 函数名.defaultProps来设置属性的默认值
import React from 'react' export default function Sidebar(props) { console.log(props) let { bg, position } = props let obj = { backgroundColor: bg, position: "fixed" } let obj1 = { right: 0 } let obj2 = { left: 0 } // eslint-disable-next-line eqeqeq position == 'right' ? obj = { ...obj1, ...obj } : obj = { ...obj2, ...obj } return ( <div style={obj}> <ul> <li>11111</li> <li>11111</li> <li>11111</li> <li>11111</li> <li>11111</li> <li>11111</li> <li>11111</li> <li>11111</li> </ul> </div> ) } //Sidebar.defaultProps 默认属性 Sidebar.defaultProps={ bg:'red', position:'fixed' }
4).设置属性的类型验证，可以通过设置属性的类型验证来限制属性的类型。
注意在进行类型验证时需要先导入React自带的prop-types
import propTypes from "prop-types"
同样类组件是通过静态属性propTypes来设置类型验证
static propTypes = {
title: propTypes.string,
leftshow: propTypes.bool,
rightshow: propTypes.bool,
}
函数组件是通过组件名.propTypes来设置类型验证
import React from 'react' import propTypes from "prop-types" export default function Sidebar(props) { console.log(props) let { bg, position } = props let obj = { backgroundColor: bg, position: "fixed" } let obj1 = { right: 0 } let obj2 = { left: 0 } // eslint-disable-next-line eqeqeq position == 'right' ? obj = { ...obj1, ...obj } : obj = { ...obj2, ...obj } return ( <div style={obj}> <ul> <li>11111</li> <li>11111</li> <li>11111</li> <li>11111</li> <li>11111</li> <li>11111</li> <li>11111</li> <li>11111</li> </ul> </div> ) } //Sidebar.defaultProps 默认属性 Sidebar.defaultProps = { bg: 'red', position: 'fixed' } //Sidebar.propTypes 属性验证 Sidebar.propTypes = { bg: propTypes.string, position: propTypes.string }