react列表渲染

最新推荐文章于 2024-06-17 09:53:58 发布

橙程橙

最新推荐文章于 2024-06-17 09:53:58 发布

阅读量212

点赞数

分类专栏： react 文章标签： react 列表渲染

本文链接：https://blog.csdn.net/rolinabc/article/details/96433446

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.react中的列表渲染

注意使用以下代码的话，注意包的导入路径

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./js/react.js"></script>
	<script src="./js/react-dom.js"></script>
	<script src="./js/babel.min.js"></script>
</head>
<script type="text/babel">
	function handle(){
		alert(1)
	}
	function MyCom(props) {
		if(props.boo){
		 	return <h1>真的</h1>
		}else{
			return <h1 onClick={handle}>假的</h1>
		}
	}
	function MyLie(props){
		return (
			<ul>
				{
				props.arr.map((item,index)=>{
				return <li key={index}>{item}</li>
				})
				}
			</ul>
		)
	}
	class Myobj extends React.Component{
		constructor(props){
			super(props)
		}
		render(){
		<!-- console.log(this.props) -->
			return <h1>年龄：{this.props.age}</h1>
		}
	}
	ReactDOM.render(<MyLie arr={[1,2,3,4]} />,document.getElementById('main'))
	ReactDOM.render(<MyCom boo={false} />,document.getElementById('ma'))
	ReactDOM.render(<Myobj oo={{username:'terry',age:13}} />,document.getElementById('mu'))
	
</script>
<body>
	<div id="ma"></div>
	<div id="mu"></div>
	<div id="main"></div>
</body>
</html>

橙程橙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react列表渲染

1.react中的列表渲染注意使用以下代码的话，注意包的导入路径<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/react.js">&lt...
复制链接

扫一扫

专栏目录