在jsx中直接写插值表达式，是以tostring的方式展现出来。
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var users = ['a','b','c']
ReactDOM.render(
<div>
<ul>
<li>{users}
</li>
</ul>
</div>,
document.getElementById('example')
);
</script>
</body>
</html>
那么，如果我们想根据数组内容生成一个包含有结构的新数组，怎么办呢？
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var users = ['a','b','c']
ReactDOM.render(
<div>
<ul>
{users.map((user,index)=>{
return <li key={index}>{user}</li>
})
}
</ul>
</div>,
document.getElementById('example')
);
</script>
</body>
</html>
网友评论