1. props 的基本使用
<div id="test"></div> <div id="test1"></div> <div id="test2"></div> <!-- 引入react核心库 --> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <!-- 引入react-dom,用于支持react操作DOM --> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!-- 引入babel,用于将jsx转为js --> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <!-- 引入类型检测库 --> <script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script> <script type='text/babel'> class Person extends React.Component { // props是只读的 render() { const {name,age,sex} = this.props // this.props.name = 'jerry' 错误代码,props只读不可更改 return ( <ul> <li>姓名:{name}</li> <li>年龄:{age+1}</li> <li>性别:{sex}</li> </ul> ) } } // 对标签属性进行类型、必要性的限制 Person.propTypes = { name: PropTypes.string.isRequired,// 限制name必传,且为字符串 sex: PropTypes.string,//限制sex为字符串 age: PropTypes.number,//限制age为数值 speak: PropTypes.func // 限制speak为函数 } // 指定标签的默认属性值 Person.defaultProps = { sex: '女',//sex默认值为女 age: 18 // age默认值为18 } const p = {name:'李红旗', age: 38, sex:'男'} const p1 = {name:'孔阳', age: 30} const p2 = {name:'子君', sex: '男'} // ReactDOM.render(<Person name='李红旗' age='38' sex='男'/>, document.getElementById('test')) /* 批量传递标签属性 因为引入了react.development.js和 babel,所以可以使用...p展开对象 但是仅限于在HTML标签中使用 */ ReactDOM.render(<Person {...p} speak={speak}/>, document.getElementById('test')) ReactDOM.render(<Person {...p1}/>, document.getElementById('test1')) ReactDOM.render(<Person {...p2}/>, document.getElementById('test2')) function speak() { console.log('说') } </script>
2. props的简写方式:上述 Person 类可以简写,使用 static 静态属性
class Person extends React.Component { // props是只读的 render() { const {name,age,sex} = this.props // this.props.name = 'jerry' 错误代码,props只读不可更改 return ( <ul> <li>姓名:{name}</li> <li>年龄:{age+1}</li> <li>性别:{sex}</li> </ul> ) } // 对标签属性进行类型、必要性的限制 static propTypes = { name: PropTypes.string.isRequired,// 限制name必传,且为字符串 sex: PropTypes.string,//限制sex为字符串 age: PropTypes.number,//限制age为数值 speak: PropTypes.func // 限制speak为函数 } // 指定标签的默认属性值 static defaultProps = { sex: '女',//sex默认值为女 age: 18 // age默认值为18 } }
注:类中的构造器能省略就省略,在开发中几乎不写
3. 函数式组件使用 props
<div id="test"></div> <!-- 引入react核心库 --> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <!-- 引入react-dom,用于支持react操作DOM --> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!-- 引入babel,用于将jsx转为js --> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <!-- 引入类型检测库 --> <script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script> <script type='text/babel'> function Person(props) { const {name, age, sex} = props return ( <ul> <li>姓名:{name}</li> <li>年龄:{age}</li> <li>性别:{sex}</li> </ul> ) } Person.propTypes = { name: PropTypes.string.isRequired,// 限制name必传,且为字符串 sex: PropTypes.string,//限制sex为字符串 age: PropTypes.number,//限制age为数值 } Person.defaultProps = { sex: '女',//sex默认值为女 age: 18 // age默认值为18 } ReactDOM.render(<Person name='jerry' age={18} sex='男'/>, document.getElementById('test')) </script>
4. props 总结
1. 定义:
1) 每个组件对象都会有 props (properties) 属性
2) 组件标签的所有属性都保存在 props 中
2. 作用
1)通过标签属性从组件外向组件内传递变化的数据
2)注意:组件内部不要修改 props 数据
3. 操作
1)内部读取某个属性值
this.props.name
2)对 props 中的属性值进行类型限制和必要性限制
第一种方式(React v15.5 开始已弃用)
Person.propTypes = { name: React.PropTypes.string.isRequired,// 限制name必传,且为字符串 sex: React.PropTypes.string,//限制sex为字符串 age: React.PropTypes.number,//限制age为数值 }第二种方式(新)
Person.propTypes = { name: PropTypes.string.isRequired,// 限制name必传,且为字符串 sex: PropTypes.string,//限制sex为字符串 age: PropTypes.number,//限制age为数值 } 3)扩展属性:将对象的所有属性通过 props 传递 <Person {...persoon}/> 4)默认属性值 Person.defaultProps = { age: 18, sex: '男' } 5)组件类的构造函数 constructor(props) { super(props) console.log(props) // 打印所有属性 }