react列表渲染

最新推荐文章于 2025-05-26 18:06:34 发布

原创最新推荐文章于 2025-05-26 18:06:34 发布 · 283 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #列表渲染

react 专栏收录该内容

2 篇文章

订阅专栏

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>