React学习-三大属性之props属性
一props属性是什么
组件的props属性用于把父组件中的数据或者方法传递给子组件来使用，props属性是一个简单结构的对象，它包含的属性正是作为JSX标签使用时候的属性组成的。
<!DOCTYPE html> <html> <head> <!-- <meta charset="UTF-8" /> --> <title>props属性的批量传输</title> </head> <body> <!-- 1.创建一个容器 --> <div id="test"></div> <!-- 2.导入核心包，必须按照顺序来导入 --> <script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js" ></script> <script type="text/javascript" src="../js/babel.min.js"></script> <div id="test"></div> <!-- 3.编写代码：注意使用的type是text/babel --> <script type="text/babel"> class Person extends React.Component { render() { let { name, age, sex } = this.props return ( <div> <ul> <li>{name}</li> <li>{age}</li> <li>{sex}</li> </ul> </div> ) } } let p = { name: 'zhangs', age: 20, sex: '男' } // console.log(...p); // 不能这样使用的，展开运算符是不可以展开对象的 // 注意：展开运算符是不可以展开对象的，这里的展开是因为react，和babel允许的，但是也是只能在标签中这样使用， // // ReactDOM.render( // <Person name='张三' age='30' sex='男' />, // document.getElementById('test') // ) // 下面这种是上面的语法糖，这样写的前提是对象里面的属性名和react里面的属性名是一致的 ReactDOM.render(<Person {...p} />, document.getElementById('test')) </script> </body> </html>
二属性的校验和默认属性
React提供了一个PropTypes这个对象(这个对象是放在了prop-types包上的，注意使用的时候要引入），用来检验组件属性的类型，PropTypes包含了组件属性的所有类型：
| 类型 | PropTypes对应的属性 |
| String | PropTypes.string |
| Number | PropTypes.number |
| Boolean | PropTypes.boolean |
| Function | PropTypes.func |
| Object | PropTypes.object |
| Array | PropTypes.array |
| Symbol | PropTypes.symbol |
| Element(React元素） | PropTypes.element |
| Node（可以被渲染的节点：数字，字符串，React元素或者由这些类型的数据组成的数组） | PropTypes.node |
当使用PropTypes.array 或者 PropTypes.object检验数据的时候，我们只知道这个属性的类型是一个对象或者是一个数组，至于对象的结构或者数组的类型是什么我们都是不知道的，这种情况下我们可以使用PropTypes.shape或者PropTypes.arrayOf,例如：
style:PropTypes.shape({
color:PropTypes.string,
fontSize:PropTypes.number
}),
sequence:PropTypes.arrayOf(PropTypes.number)
表示style是一个对象，里面的属性color是一个字符串类型的，fontSize属性是一个数字类型的，sequence是一个由数字组成的数组。
如果属性是组件的必需属性，我们可以在PropTypes的类型属性上调用isRequired，如下：
name: PropTypes.string.isRequired,
React还为组件属性指定了默认值的特性，这个特性是通过defaultProps实现，当组件没有被赋值的时候，就会使用这个默认的值
<!DOCTYPE html> <html> <head> <!-- <meta charset="UTF-8" /> --> <title>类式组件</title> </head> <body> <!-- 1.创建一个容器 --> <div id="test"></div> <div id="test1"></div> <!-- 2.导入核心包，必须按照顺序来导入 --> <script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js" ></script> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/javascript" src="../js/prop-types.js"></script> <div id="test"></div> <!-- 3.编写代码：注意使用的type是text/babel --> <script type="text/babel"> class Person extends React.Component { render() { let { name, age, sex } = this.props return ( <div> <ul> <li>{name}</li> <li>{age}</li> <li>{sex}</li> </ul> </div> ) } } // 设置属性类型 Person.propTypes = { // name: React.PropsTypes.string // 在React.15.xxx里面是这样写的 // 在16.xxx后面就hi这样写的，但是要引入prop-types包 name: PropTypes.string.isRequired, // 名字是必穿的，并且类型是string类型的，注意string是小写开头而不是大写开头，因为String是js中的关键子 age: PropTypes.number, // 年龄必须是数字类型的字符串 sex: PropTypes.string // sayHi:PropTypes.func 这种是指定默认类型为函数类型 } // 设置默认值 Person.defaultProps = { age: 19, // 当没有传递的时候，设置年龄的默认值是19 sex: '男' } let p = { name: 'zhangsan', age: 20, sex: '男' } ReactDOM.render(<Person {...p} />, document.getElementById('test')) ReactDOM.render( <Person name='zhnags' sex='男' />, document.getElementById('test1') ) </script> </body> </html>
将属性的校验放在类里面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>限制props属性的类型</title> </head> <body> <div id="app1"></div> <div id="app2"></div> <div id="app3"></div> <script src="../js/babel.min.js"></script> <script src="../js/react.development.js"></script> <script src="../js/react-dom.development.js"></script> <!-- 引入一个类型检测的包 --> <script src="../js/prop-types.js"></script> <script type="text/babel"> // 1.创建类组件 class Person extends React.Component { static propTypes = { name: PropTypes.string.isRequired, age: PropTypes.number, sex: PropTypes.string } static defaultProps = { age: 16, sex: '男' } render() { return ( <ul> <li>姓名：{this.props.name}</li> <li>年龄：{this.props.age + 1}</li> <li>性别：{this.props.sex}</li> </ul> ) } } //可以将props的类型控制和设置它的默认值设置放在类的里面 // 指定Person里面的porps属性的类型 // Person.propTypes = { // // 名字是字符串并且必须要传入，string为小写 // name: PropTypes.string.isRequired, // // 年龄必须是数组类型的， // age: PropTypes.number, // // 性别是字符串类型的 // sex: PropTypes.string // // 如果是函数类型的就是func // } // 指定它的默认值 // Person.defaultProps = { // age: 18, // sex: '女' // } // 2.渲染组件 const p = { name: '张三', age: 19, sex: '男' } ReactDOM.render(<Person {...p} />, document.querySelector('#app1')) ReactDOM.render( <Person name='王五' sex='女' />, document.querySelector('#app2') ) ReactDOM.render( // 如果要传入一个数值类型的，则需要使用{} <Person name='李四' age={20} />, document.querySelector('#app3') ) </script> </body> </html>
函数式的props：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>函数式组件的props属性</title> </head> <body> <div id="app"></div> <!-- 导入库文件 --> <script src="../js/babel.min.js"></script> <script src="../js/react.development.js"></script> <script src="../js/react-dom.development.js"></script> <script src="../js/prop-types.js"></script> <script type="text/babel"> // 可以使用函数的参数来设置props属性 const Person = function (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, age: PropTypes.number, sex: PropTypes.string } // 给props设置默认值 Person.defaultProps = { age: 16, sex: '女' } ReactDOM.render( <Person name='张三' sex='女' />, document.querySelector('#app') ) </script> </body> </html>
