大家好，欢迎来到IT知识分享网。

组件核心属性-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'))

1. 姓名必须指定，且为字符串类型

go复制代码 //对标签属性进行类型、必要性的限制 Person.propTypes = { name: PropTypes.string.isRequired, sex: PropTypes.string, age: PropTypes.number, dance: PropTypes.func }

\2. 性别为字符串类型，如果性别没有指定，默认为男 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的性质和作用

1. 每个组件对象都会有props属性
2. 组件标签的所有属性都保存在props中
3. 通过标签属性从组件外向组件内传递变化的数据。
4. 注意：组件内部不要修改props的值

注意可以运算不可以修改。运算和修改的区别如图所示

用法

内部读取某个属性值this.props.name

在render函数里面

arduino 复制代码console.log(this.props.name)

对props中的属性值进行类型限制和必要性限制

1. 第一种方式（React v15.5开始已弃用） Person.propTypes = { name: React.PropTypes.string.isRequired, sex: PropTypes.string, age: PropTypes.number } 若一直在React身上加PropTypes属性，那么React核心对象会很大。
2. 使用 prop-types库对标签属性进行限制，React代码打包之后会更小一些
3. 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>
4. 拓展属性：将对象的所有属性通过props传递 const person3 = { name: ‘双下巴’, age: 23, sex: ‘不 明’ } ReactDOM.render(<Person {…person3} />, document. getElementById(‘test3’))
5. 默认属性值 Person.defaultProps = { 属性:值 }
6. 类式组件类中的构造函数

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值得关注。