jsx语法的简介
- 什么是jsx
- 如何使用jsx
什么是jsx
jsx的特点
jsx的语法
- 元素名 （首字母大写）
- 子节点 （嵌套）
- 求值表达式 可以是三元表达式，也可以 是自执行涵数 (不要使用if switch等。)
- 驼峰命名
- label标签的for属性只能用htmlFor代替和css中的class只能用className，因为es6中有class关键字
##示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<link href="./index.css" rel="stylesheet">
<script src="../build/react.min.js"></script>
<script src="../build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
</script>
<script type="text/babel" >
var Sky = React.createClass({
render:function () {
var text = '那都不是事儿'
var a = 2
var b = 4
return (
<div >
sky
<p>{a == 1 ? text : '雾霾'}</p>
<div>
{
(function () {
if(b==3){
return 'b=3'
}else {
return 'b !==3'
}
return '那都不是事'
})()
}
</div>
</div>
)
}
})
var World = React.createClass({
render:function () {
var style={
width:'200px',height:'200px',border:'1px solid red'
}
return (
<div style={style}>
world
<Sky/>
</div>
)
}
})
var Hello = React.createClass({
render:function () {
return (
<div className="Box">hello {this.props.name}
<World/>
</div>
)
}
})
ReactDOM.render(<Hello name="aaa"/>,document.getElementById('root'))
</script>
</html>
jsx语法演示,子组件和父组件之间的通信:props
import React from 'react';
import ReactDOM from 'react-dom';
var arr=["one","two","three","four","five","one"];
var App=React.createClass({
//设置内部的状态state
getInitialState(){
return{
name:"www",age:15
}
},render(){
//方法一
var uls=[];
for (var i = 0; i < arr.length; i++) {
uls.push(<li>{arr[i]}</li>);
}
//方法二：也可以用map方法来遍历
//在jxs里写数组会出现这样的错
/*
*
* warning.js:36 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `App`. See https://fb.me/react-warning-keys for more information.
in li (at index.js:16)
in App (at index.js:44)
*
*
*
* */
//解决办法加上一标识key的值，如果不加，在数组里添加就会把数据全部删除
//重新加载，加上标识的key，会先比较数组里的每一项，如果相同则命保留，如果不同则添加
//如果添加相同的元素，i
var nodes=arr.map(function (item,i) {
return <li key={item+"-"+i}>{item}</li>
})
return(
<div>
<ul>{uls}</ul>
{/*接收组件上props属性*/}
{/*this是整个的组件，这里指的是App*/}
<p>{this.props.name}</p>
{/*拿到组件内部的值*/}
<p>{this.state.age}</p>
{/*react把input输入框内部封装了，用onChange方法加涵数名改变*/}
<input value={this.state.age} onChange={this.handle}/>
<div>{nodes}</div>
<Stuent list={arr}/>
</div>
)
},handle:function (e) {
this.setState({
age:e.target.value
})
}
})
var Stuent=React.createClass({
render(){
var lists=this.props.list.map(function (item,i) {
return (
<li key={item+i}>{item}</li>
)
})
return(
<ul>
{lists}
</ul>
)
}
})
//props组件上的属性，自定义
ReactDOM.render(<App name="小样"/>,document.getElementById("root"));
react实现表格的增加
iimport React from 'react';
import ReactDOM from 'react-dom';
import './index.css'
var Student = React.createClass({
render:function () {
var nodes = this.props.list.map(function (student,i) {
return (
<li key={i}>
<span>{i}</span>
<span>{student.name}</span>
<span>{student.age}</span>
<span>{student.sex}</span>
<span>{student.singleDog ? '单身狗' : '恩爱狗'}</span>
</li>
)
})
return (
<ul>
<li>
<span>{'id'}</span>
<span>姓名</span>
<span>年龄</span>
<span>性别</span>
<span>情感状态</span>
</li>
{nodes}
</ul>
)
}
})
var Action=React.createClass({
render () {
return(
<div>
<p>
<label>name</label>
<input value={this.props.name} onChange={this.props.onChangeName}/>
</p>
<p>
<label>age</label>
<input value={this.props.age} onChange={this.props.onChangeAge}/>
</p>
<p>
<label >sex</label>
<input value={this.props.sex} onChange={this.props.onChangeSex}/>
</p>
<p>
<label>情感状态</label>
<input value={this.props.status} onChange={this.props.onChangeStatus}/>
</p>
<button onClick={this.props.onAdd}>增加</button>
</div>
)
}
})
var App = React.createClass({
getInitialState:function () {
return {
students: [
{
name : '嘿嘿哈',age : 100,sex : 'boy',singleDog:true
},{
name : 'ryan',age : 27,{
name : '梦里梦见梦中梦',age : 22,{
name : '風从東方來',age : 21,sex : 'gay',{
name : '望轻舟(王钦洲)',age : 23,{
name : 'ReadMe',],name:'name',age:18,sex:'boy',status:0
}
},render:function () {
return (
<div>
<h3></h3>
<Student list={this.state.students}/>
<Action
name={this.state.name}
onChangeName={this.changeName}
age={this.state.age}
onChangeAge={this.changeAge}
sex={this.state.sex}
onChangeSex={this.changeSex}
status={this.state.status}
onChangeStatus={this.changeStatus}
onAdd={this.handleAdd}
/>
</div>
)
},changeName:function (e) {
this.setState({
name : e.target.value
})
},changeAge:function (e) {
this.setState({
age : e.target.value
})
},changeSex:function (e) {
this.setState({
sex : e.target.value
})
},changeStatus:function (e) {
this.setState({
status : e.target.value
})
},handleAdd:function () {
var students = this.state.students
var obj = {
name : this.state.name,age : this.state.age,sex : this.state.sex,status: this.state.status
}
students.push(obj)
this.setState({
students:students
})
}
})
ReactDOM.render(<App/>,document.getElementById("root"));
this.props.children的应用
父组件
import React from 'react';
import Button from './button/index'
var AntStudy=React.createClass({
render:function () {
return(
<div>
<h3>jsx</h3>
<Button>dkdkd</Button>
</div>
)
}
})
export default AntStudy;
子组件
import React from 'react';
var Button=React.createClass({
render:function () {
return(
<button>{this.props.children}</button>
)
}
})
export default Button;