一、函数组件
1.函数(无状态)组件的创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
<body>
<div id="demoReact">
</div>
<script type="text/babel">
//创建一个组件
function MyCom(){
return(
<div>我是一个组件</div>
)
}
//调用组件
let com=<MyCom/>
//调用多个组件 则需要div在外围包裹
// let com=<div>
// <MyCom/><MyCom/>
// </div>
ReactDOM.render(com,document.getElementById("demoReact"));
</script>
</body>
</html>
2.父子组件的创建
<script type="text/babel">
//三个子组件
function MyComA(){
return(
<div>我是子1组件</div>
)
}
function MyComB(){
return(
<div>我是子2组件</div>
)
}
function MyComC(){
return(
<div>我是子3组件</div>
)
}
//父组件
function Com(){
return(
<div>
<MyComA/>
<MyComB/>
<MyComC/>
</div>
)
}
//渲染父组件Com()
ReactDOM.render(Com(),document.getElementById("demoReact"));
</script>
运行结果
二、类组件
类组件的创建
<script type="text/babel">
//创建类组件
class MyCom extends React.Component{
//必须在render方法下，,并且有返回值
render(){
return(
<div>类组件</div>
)
}
}
let com =<MyCom/>
ReactDOM.render(com,document.getElementById("demoReact"));
</script>
运行结果
173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
