您的位置：首页 > Web前端 > React

react 小例子

2017-04-11 10:44 323 查看

1.初步环境
<!DOCTYPE html>
<html>
<head lang="en">

<meta charset="UTF-8">

<title></title>

<script src="../js/react.js"></script>

<script src="../js/react-dom.js"></script>

<script src="../js/browser.min.js"></script>
</head>
<body>

<div id="example"></div>

<script type="text/babel">
ReactDOM.render(
<h1>hello world!</h1>,
document.getElementById('example')
)

</script>
</body>
</html>
2.函数
<div id="example"></div>
<script type="text/babel">
var names = ['zas','sdff','dsfe'];
ReactDOM.render(
<div>
{
names.map(function(name){
return <div>hello! { name }</div>
})
}
</div>,
document.getElementById('example')
)
</script>

3.div 中插入数组
①数组有引号
<div id="example"></div>

<script type="text/babel">

var arr = [

'<h1>直接在div中插入数组</h1>',

'<p>这时插入的h1,p标签不再是块元素，就是普通的行元素。</p>'

]
ReactDOM.render(

<div>{ arr }</div>,

document.getElementById('example')

)
</script>

①数组无引号
<div id="example"></div>
<script type="text/babel">

var arr = [

<h1>直接在div中插入数组</h1>,

<p>如果标签 ‘ 引号引起来，这时插入的h1,p标签不再是块元素，就是普通的内容。</p>,

<p>没有引起来插入的才是标签元素</p>

]
ReactDOM.render(

<div>{ arr }</div>,

document.getElementById('example')

)
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航