基本渲染：
<!DOCTYPE html>
<html>
<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>
<div id="xpf"></div>
<script type="text/babel">
class Xpf extends React.Component {
render() {
let arr = [1,2,3];
let str = '我是一個測試案例';
return (
<div>
{arr}{str}
</div>
);
}
}
ReactDOM.render(
<Xpf />,
document.getElementById('xpf')
);
</script>
</body>
</html>
效果如下：
直接使用 { } ，就可以將變量渲染到頁面上
列表渲染：
<!DOCTYPE html>
<html>
<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>
<div id="xpf"></div>
<script type="text/babel">
class Xpf extends React.Component {
render() {
let arr = [{
name:'xpf',
age:23
},{
name:'sss',
age:20
}]
return (
<div>
<ul>
{
arr.map((item,index)=>{
return(
<li key={index}>{item.name} {item.age}</li>
)
})
}
</ul>
</div>
);
}
}
ReactDOM.render(
<Xpf />,
document.getElementById('xpf')
);
</script>
</body>
</html>
效果如下：
數組arr中有兩個對象（object），可以通過arr.map()的方法將arr中的值渲染到頁面上，其中，map有兩個參數item和index，item是整個數據，index是下標
注意：li標籤要加 key={index}，以此保證渲染出來的每個li做到有唯一標識，如果不加，會報警告如下
條件渲染：
後續更新。。。