第一個(gè)react程序
注意：
- 需要在html中引入 react.js、react-dom.js、browser.min.js，按照順序依次引入，后者基于前者
- body里面就一個(gè)容器，其他都是虛擬標(biāo)簽
- script類型為type=text/babel 支持jsx語法，jsx支持dom和js的混寫；jsx里遇到j(luò)s就需要用{}括起來， jsx只接受Map循環(huán)
- 注釋用 {}包裹
- 在render中最外層只能有一個(gè)容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一個(gè)程序</title>
<!--引入文件必須按照以下順序-->
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script type="text/babel">
var str = "我是字符串";
ReactDOM.render(<h1>{str} {array} hello word /*我是假注釋*/{/*我是注釋*/}</h1>
,document.getElementById("app"));
</script>
</html>
運(yùn)行結(jié)果：
image.png
Map循環(huán)
需要加k值，唯一標(biāo)識(shí)，否則盡管會(huì)出效果但也會(huì)報(bào)錯(cuò)
let arr = ["張三","李四","王五"];
//最外層只能有一個(gè)容器 jsx只接受Map循環(huán)
ReactDOM.render(<div>{arr.map(function(v,k){
return <p key={k}>{v}</p>
})}</div>
,document.getElementById("app"));
image.png
for循環(huán)
將循環(huán)生成的用數(shù)組保存，str不需要加引號(hào)，里面的變量用{}來解析
let obj = [{name:"張三",age:19},{name:"李四",age:12},{name:"王五",age:20}];
var html = [];
for(var i=0;i<obj.length;i++){
var str = <p key={i}>姓名是{obj[i].name};年齡是{obj[i].age}</p>
html.push(str);
}
ReactDOM.render(<div>{html}</div>
,document.getElementById("app"));
運(yùn)行結(jié)果：
image.png
style 樣式
寫法一
var mystyle = {width:"100px",height:"100px",background:"red" };
ReactDOM.render(<div style={mystyle}>我是測(cè)試div</div>,document.getElementById("app"));
寫法二
1.第一個(gè){}代表jsx環(huán)境，第二個(gè){}代表對(duì)象
2.class類用className, 因?yàn)閏lass是關(guān)鍵字
// style樣式：
.mydiv{
color:blue;
}
// js:
ReactDOM.render(<div style={{width:"100px",height:"100px",background:"red" }} className="mydiv">我是測(cè)試div</div>
,document.getElementById("app"));
運(yùn)行結(jié)果：
image.png
this.props.children
this.props 對(duì)象的屬性與組件的屬性一一對(duì)應(yīng)，但是有一個(gè)例外，就是 this.props.children 屬性。它表示組件的所有子節(jié)點(diǎn)
//ES6中類的多個(gè)方法不用逗號(hào)隔開
class Hello extends React.Component{
render(){
return <h1>姓名是：{this.props.name}年齡是：{this.props.age}
{/*外層需要用{}包裹，代表jsx環(huán)境 循環(huán)hello標(biāo)簽的兩個(gè)p標(biāo)簽*/}
{React.Children.map(this.props.children,function(v,k){
//v的外層需要包裹容器
return <div>{v}</div>
})}
</h1>
}
test(){
}
}
ReactDOM.render(<Hello
name="張三"
age="20"
>
<p>我是第一條數(shù)據(jù)</p>
<p>我是第二條數(shù)據(jù)</p>
</Hello>,document.getElementById("app"));
運(yùn)行結(jié)果：
image.png
組件
1.定義一個(gè)組件 組件的首字母大寫
2.通過屬性傳參
var Hello = React.createClass({
render:function(){
return <div>我是HELLO組件,姓名是：{this.props.name}</div>;
}
})
ReactDOM.render(<Hello name="張三"/>,document.getElementById("app"))
運(yùn)行結(jié)果：
image.png
多個(gè)組件
1.定義一個(gè)WebView、linkView(a鏈接，網(wǎng)站名字)組件
2.外部傳入網(wǎng)站名字和鏈接地址
var WebView = React.createClass({
render:function(){
return <div><LinkView {...this.props}/></div>
}
})
var LinkView = React.createClass({
render(){
return <div>鏈接地址：<a href={this.props.link}>{this.props.webName}</a></div>
}
})
ReactDOM.render(<WebView webName="百度" link="https://www.baidu.com/"></WebView>
,document.getElementById("app"))
運(yùn)行結(jié)果：
image.png
image.png
