<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react中props</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
</head>
<body>
<!--
1.姓名必须显示
2.如果性别没有，默认为男
3.如果没有年龄，默认18
-->
<div id="app"></div>
<div id="app1"></div>
<script type="text/babel">
// import PropTypes from 'prop-types';
// 1.定义组件标签
function Person(props){
return(
<ul>
<li>姓名:{props.name}</li>
<li>年龄:{props.age}</li>
<li>性别:{props.sex}</li>
</ul>
)
}
// 3.指定默认值
Person.defaultProps = {
age:18,
sex:"男"
}
// 4.指定属性值类型和必要性
Person.propTypes = {
name:PropTypes.string.isRequired,
age:PropTypes.number
}
// 2.渲染组件标签
const p1 = {
name:"tom",
age:22,
sex:"男"
}
const p2 = {
name:"jack",
}
ReactDOM.render(<Person {...p1}/>,document.getElementById('app') )
ReactDOM.render(<Person {...p2}/>,document.getElementById('app1') )
</script>
</body>
</html>
效果图
44b615908131622ce7ffa7a6ed7cbe4.png
