废话不多说上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遍历对象</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<!--创建dom根节点一个页面中需要有一个根节点 这个节点下的内容就会被react所管理-->
<div id="example">
</div>
<script type="text/babel">
let obj={
name:"MW",
age:"20",
sex:"男"
}
let myDom=<div>
{
Object.keys(obj).map((v,i)=>{
return <p key={v}>遍历的属性:{v}--------------遍历的值:{obj[v]}</p>
})
}
</div>
ReactDOM.render(myDom,document.getElementById("example"));
</script>
</body>
</html>
效果图