<head>
<meta charset="UTF-8">
<title>demo</title>
<!-- 引入react核心库 -->
<script type="text/javascript" src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!-- 支持react操作DOM -->
<script type="text/javascript" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- 将jsx转为js -->
<script type="text/javascript" src="https://unpkg.com/babel-standalone@6/babel.js"></script>
<!-- 对组件标签属性进行限制, React v15.5之后，React.PropTypes 移入此包 -->
<script type="text/javascript" src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
//******函数式组件定义******
//组件的参数都在 props 中
function FunComponent(props) {
const {name, age} = props
return <h1>函数式组件：name = {name}, age = {age}</h1>
}
FunComponent.propTypes = {
//限制name必传，且为字符串
name: PropTypes.string.isRequired,
//限制age为数值
age: PropTypes.number,
//限制myFunc为函数
myFunc: PropTypes.func,
}
//指定默认标签属性值
FunComponent.defaultProps = {
//age默认值为18
age: 18
}
//1.创建虚拟DOM
const vDOM = <div>
<FunComponent name="aaa" age={10}/>
</div>;
//2.渲染虚拟DOM到页面
ReactDOM.render(vDOM, document.getElementById("root"));
</script>
</body>
注：
children-data <===> children-data
扫一扫
1581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
