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) // 打印所有属性 }
原文地址：https://www.cnblogs.com/bulu08042/p/15399980.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。