Home > Article > Web Front-end > How to traverse an array using react

How to traverse an array using react

王林forward: 2021-01-07 13:41:383121browse

This article teaches you how to use React to traverse an array and generate an unordered list using array elements.

(Learning video sharing: react video tutorial)

Implementation source code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>React遍历数组</title>
		<script type="text/javascript" src="../js/react.js" ></script>
		<script type="text/javascript" src="../js/react-dom.js" ></script>
		<script type="text/javascript" src="../js/browser.min.js" ></script>
		<script type="text/babel">
			var students = ["张三然","李慧思","赵思然","孙力气","钱流量"];
			
			ReactDOM.render(
				<ul>
					{
						students.map(function(username){
							return <li>{username}</li>
						})
					}
				</ul>,
				document.getElementById("ulLi")
			)
		</script>
	</head>
	<body>
		<div id="ulLi"></div>
	</body>
</html>

Running results:

How to traverse an array using react

The above is the detailed content of How to traverse an array using react. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete

Previous article：How to determine if the mouse is on an element in jqueryNext article：How to determine if the mouse is on an element in jquery

See more

How to traverse an array using react

Related articles