08_组件三大属性_props
Posted zhanzhuang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了08_组件三大属性_props相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="example1"></div>
<hr>
<div id="example2"></div>
<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/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
/*
* 需求：自定义用来显示一个人员信息的组件，效果如页面.说明：
1.如果性别没有指定，默认为男
2.如果年龄没有指定，默认为18
* */
//1.定义组件 (简单)
/*function Person(props) {
return (
<ul>
<li>姓名：{props.name}</li>
<li>年龄：{props.age}</li>
<li>性别：{props.sex}</li>
</ul>
)
}*/
//1.定义组件(复杂)
class Person extends React.Component {
render() {
console.log(this);
return (
<ul>
<li>姓名：{this.props.name}</li>
<li>年龄：{this.props.age}</li>
<li>性别：{this.props.sex}</li>
</ul>
)
}
}
//指定属性默认值
Person.defaultProps = {
sex: ‘男‘,
age: 18
};
//指定属性值的类型和必要性
Person.propTypes = {
name: PropTypes.string.isRequired,
sex: PropTypes.string,
age: PropTypes.number
};
//2.渲染组件标签
const person = {
name: ‘Tom‘,
age: 18,
sex: ‘女‘
};
/*
* ...的作用
* 1.打包
* function fn(...as) {} fn(1, 2, 3)
* 2.解包
* const arr1 = [1, 2, 3] const arr2 = [6, ...arr1, 9]
* */
ReactDOM.render(<Person {...person}/>, document.getElementById(‘example1‘));
const person2 = {
myName: ‘Jack‘,
age: 17
};
ReactDOM.render(<Person name={person2.myName} age={person2.age}/>, document.getElementById(‘example2‘));
</script>
</body>
</html>
以上是关于08_组件三大属性_props的主要内容，如果未能解决你的问题，请参考以下文章
React面向组件编程 - 基本理解和使用 - 组件三大核心属性state-props-refs - 事件处理 - 非受控组件 - 受控组件 - 高阶函数 - 函数柯里化
React组件三大核心属性: state、props、refs