react — 基础语法
2018-02-05 本文已影响0人
胡自鲜
第一个react程序
注意：
- 需要在html中引入 react.js、react-dom.js、browser.min.js，按照顺序依次引入，后者基于前者
- body里面就一个容器，其他都是虚拟标签
- script类型为type=text/babel 支持jsx语法，jsx支持dom和js的混写；jsx里遇到js就需要用{}括起来， jsx只接受Map循环
- 注释用 {}包裹
- 在render中最外层只能有一个容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个程序</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>
运行结果：
image.png
Map循环
需要加k值，唯一标识，否则尽管会出效果但也会报错
let arr = ["张三","李四","王五"];
//最外层只能有一个容器 jsx只接受Map循环
ReactDOM.render(<div>{arr.map(function(v,k){
return <p key={k}>{v}</p>
})}</div>
,document.getElementById("app"));
image.png
for循环
将循环生成的用数组保存，str不需要加引号，里面的变量用{}来解析
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"));
运行结果：
image.png
style 样式
写法一
var mystyle = {width:"100px",height:"100px",background:"red" };
ReactDOM.render(<div style={mystyle}>我是测试div</div>,document.getElementById("app"));
写法二
1.第一个{}代表jsx环境，第二个{}代表对象
2.class类用className, 因为class是关键字
// style样式：
.mydiv{
color:blue;
}
// js:
ReactDOM.render(<div style={{width:"100px",height:"100px",background:"red" }} className="mydiv">我是测试div</div>
,document.getElementById("app"));
运行结果：
image.png
this.props.children
this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点
//ES6中类的多个方法不用逗号隔开
class Hello extends React.Component{
render(){
return <h1>姓名是：{this.props.name}年龄是：{this.props.age}
{/*外层需要用{}包裹，代表jsx环境 循环hello标签的两个p标签*/}
{React.Children.map(this.props.children,function(v,k){
//v的外层需要包裹容器
return <div>{v}</div>
})}
</h1>
}
test(){
}
}
ReactDOM.render(<Hello
name="张三"
age="20"
>
<p>我是第一条数据</p>
<p>我是第二条数据</p>
</Hello>,document.getElementById("app"));
运行结果：
image.png
组件
1.定义一个组件 组件的首字母大写
2.通过属性传参
var Hello = React.createClass({
render:function(){
return <div>我是HELLO组件,姓名是：{this.props.name}</div>;
}
})
ReactDOM.render(<Hello name="张三"/>,document.getElementById("app"))
运行结果：
image.png
多个组件
1.定义一个WebView、linkView(a链接，网站名字)组件
2.外部传入网站名字和链接地址
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"))
运行结果：
image.png
image.png
