组件核心属性-props
需求:自定义用来显示一个人员信息的组件
javascript
class Person extends React.Component {
render() {
const { name, age, sex } = this.props;
return (
<ul>
<li>姓名:{name}</li>
<li>年龄:{age + 1}</li>
<li>性别:{sex}</li>
</ul>
)
}
}
ReactDOM.render(<Person name="jerry" age={19} sex="男" dance={dance} />, document.getElementById('test1'))
ReactDOM.render(<Person name="Lilly" age={18} sex="女" />, document.getElementById('test2'))
ReactDOM.render(<Person name="双下巴" age={23} sex="不明" />, document.getElementById('test3'))
- 姓名必须指定,且为字符串类型
go
//对标签属性进行类型、必要性的限制
Person.propTypes = {
name: PropTypes.string.isRequired,
sex: PropTypes.string,
age: PropTypes.number,
dance: PropTypes.func
}
- 性别为字符串类型,如果性别没有指定,默认为男 Person.defaultProps = { sex: '未知', age: 18 } 3. 年龄为数字类型,必须指定 4. 给某个组件添加dance函数,限制dance只能是函数类型
javascript
ReactDOM.render(<Person name="jerry" age={19} sex="男" dance={dance} />, document.getElementById('test1'))
function dance() {
console.log(' be good at dancing')
}
Person.propTypes = {
dance: PropTypes.func
}
在函数的render函数中打印console.log(this),可以查看渲染数据的结果
props的性质和作用
- 每个组件对象都会有props属性
- 组件标签的所有属性都保存在props中
- 通过标签属性从组件外向组件内传递变化的数据。
- 注意:组件内部不要修改props的值
注意可以运算不可以修改。运算和修改的区别如图所示
用法
内部读取某个属性值this.props.name
在render函数里面
arduino
console.log(this.props.name)
对props中的属性值进行类型限制和必要性限制
-
第一种方式(React v15.5开始已弃用) Person.propTypes = { name: React.PropTypes.string.isRequired, sex: PropTypes.string, age: PropTypes.number } 若一直在React身上加PropTypes属性,那么React核心对象会很大。
-
使用 prop-types库对标签属性进行限制,React代码打包之后会更小一些
ini<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script> <script type="text/babel"> Person.propTypes = { name:PropTypes.string.isRequired, sex: PropTypes.string, age: PropTypes.number } </script>
-
拓展属性:将对象的所有属性通过props传递 const person3 = { name: '双下巴', age: 23, sex: '不 明' } ReactDOM.render(<Person {...person3} />, document. getElementById('test3'))
-
默认属性值 Person.defaultProps = { 属性:值 }
-
类式组件类中的构造函数
kotlin
constructor(props) {
super(props)
this.state = { 属性:值}
// 解决changeWeather中this指向的问题
this.组件实例新属性名称 = this.自定义函数.bind(this)
}
props的基本形式
xml
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
class Person extends React.Component {
render() {
console.log(this)
const { name, age, sex } = this.props
return (
<ul>
<li>姓名:{name}</li>
<li>年龄:{age}</li>
<li>性别:{sex}</li>
</ul>
)
}
}
ReactDOM.render(<Person name="jerry" age="19" sex="男" />, document.getElementById('test1'))
ReactDOM.render(<Person name="Lilly" age="18" sex="女" />, document.getElementById('test2'))
ReactDOM.render(<Person name="双下巴" age="23" sex="不明" />, document.getElementById('test3'))
</script>
运行截图
批量传递props
花括号加展开运算符接收数据
{...数组或者集合}
介绍一下展开运算符
javascript
let arr1 = [1, 3, 5, 7, 9]
let arr2 = [1, 2, 3, 4]
console.log(...arr1);//展开一个数组
let arr3 = [...arr1, ...arr2]//连接数组
console.log('arr3:', arr3)
function sum(...numbers) {
return numbers.reduce((preValue, currentValue) => {
return preValue + currentValue
})
}
console.log(sum(1, 2, 3, 4));//10
ini
let person = { name: 'tom', age: 18 }
console.log(...person);展开运算符不能展开对象
报错信息 Uncaught TypeError: Spread syntax requires ...iterable[Symbol.iterator] to be a function 展开运算符不能展开对象。
对传递的标签属性进行类型限制,必要性限制和默认设置。React15使用以下代码进行标签属性限制
ini
Person.propTypes = {
name: React.PropTypes.string
}
React16版本及其以后不再从React身上直接取属性,因为这样可能会使得React变得臃肿。使用prop-types.js,然后
xml
<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
props的简写方式
如果想要把标签属性的限制和默认值相关代码放在组件类的内部,可以尝试下面的写法(写在组件里面,和render函数是并列关系)
yaml
static propTypes = {
name: PropTypes.string.isRequired,
sex: PropTypes.string,
age: PropTypes.number,
dance: PropTypes.func
};
static defaultProps = {
sex: '未知',
age: 18
}
测试这段代码是否可行,可以将渲染组件到页面的代码去掉性别,dance直接赋值,如果生效会显示关于属性限制的相关的报错
类式组件中的构造器与props
通常在React中,构造函数仅用于以下两种情况
- 通过给this.state赋值对象来初始化内部state
- 为事件处理函数绑定实例
构造器是否接收props,是否传递给super取决于是否希望在构造器上通过this访问props
undefined打印了三次是因为页面中有三次渲染
函数式组件使用props
最新的React建议使用函数式组件而不是类式组件。
this.state.x,this.props.name中的this是组件实例对象,函数式组件中没有this,不能state,refs,但是可以props
xml
<script type="text/babel">
function Predecessor() {
const { name, age, address } = props
return (
<ul>
<li>name:{name}</li>
<li>age:{age}</li>
<li>address:{address}</li>
</ul>
)
}
ReactDOM.render(<Predecessor name='LS' age='18' address='Mars' />, document.getElementById('demo1'))
</script>
props未定义的原因是没有在函数的参数里接收props
上面代码中从函数参数中读取属性也可以写解构的形式
css
function Predecessor({ name, age, address }) {
return (
<ul>
<li>name:{name}</li>
<li>age:{age}</li>
<li>address:{address}</li>
</ul>
)
}
代码的解构和从函数参数中读取属性是等价的。注意不要忘记花括号,因为属性的集合是一个对象。
对函数式组件属性的限制写在function外部。
最新版的React建议使用函数式组件,所以函数式组件使用props值得关注。