react学习---props的简写形式
Posted leiyanting
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react学习---props的简写形式相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对props进行限制</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 引入prop-types，用于对组件标签属性进行限制 -->
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
//创建组件
class Person extends React.Component
constructor(props)
//构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props
// console.log(props);
super(props)
console.log(\'constructor\',this.props);
//对标签属性进行类型、必要性的限制
static propTypes =
name:PropTypes.string.isRequired, //限制name必传，且为字符串
sex:PropTypes.string,//限制sex为字符串
age:PropTypes.number,//限制age为数值
//指定默认标签属性值
static defaultProps =
sex:\'男\',//sex默认值为男
age:18 //age默认值为18
render()
// console.log(this);
const name,age,sex = this.props
//props是只读的
//this.props.name = \'jack\' //此行代码会报错，因为props是只读的
return (
<ul>
<li>姓名：name</li>
<li>性别：sex</li>
<li>年龄：age+1</li>
</ul>
)
//渲染组件到页面
ReactDOM.render(<Person name="jerry"/>,document.getElementById(\'test1\'))
</script>
</body>
</html>
以上是关于react学习---props的简写形式的主要内容，如果未能解决你的问题，请参考以下文章