React 之 函数式组件使用props
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>3_函数组件使用props</title>
</head>
<body>
<!--准备好一个容器-->
<div id="test1"></div>
<div id="test2"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/"></script>
<!--引入react-dom，用于支持react操作DOM-->
<script type="text/javascript" src="../js/"></script>
<!--引入babel,用于将jsx转为js-->
<script type="text/javascript" src="../js/"></script>
<!--引入prop-types,用于将对组件标签属性进行限制-->
<script type="text/javascript" src="../js/"></script>
<script type="text/babel"> //<!--此处一定要写babel-->
//创建组件
function Person(props){
const {name,gender,age} = props
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{gender}</li>
<li>年龄：{age}</li>
</ul>
)
}
Person.propTypes={
name:PropTypes.string.isRequired, //name指定为字符串类型，而且必须得填，不能为空
gender:PropTypes.string,
age:PropTypes.number,
speak:PropTypes.func, //限制speak为函数
}
Person.defaultProps = { //如果gender或者age值为空，就使用默认值
gender:'男',
age:18
}
//渲染组件到页面
ReactDOM.render(<Person name="sandy" age={18} gender="女" speak={speak}/>,document.getElementById('test1'))
const p={name:'小唐',age:18,gender:'女'}
ReactDOM.render(<Person {...p}/>,document.getElementById('test2'))
function speak(){
console.log('happy');
}
</script>
</body>
</html>