前端那些事之react篇jsx语法

最新推荐文章于 2024-05-09 22:45:25 发布

weixin_34101784

最新推荐文章于 2024-05-09 22:45:25 发布

阅读量258

点赞数

文章标签：前端 python javascript ViewUI

原文链接：https://my.oschina.net/yongxinke/blog/858819

版权

2019独角兽企业重金招聘Python工程师标准>>>

jsx语法的简介

什么是jsx
如何使用jsx

什么是jsx

jsx = JavascriptXml = 虚拟dom
jsx是基于EcmaScript的一种新特性
jsx是一种定义带属性（DOM属性）树结构(DOM结构)的语法

jsx的特点

类xml语法容易接受
增加js语义
结构清晰
抽象程度高&&跨平台
代码模块化

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,
                    sex : 'boy',
                    singleDog:true
                },
                {
                    name : '梦里梦见梦中梦',
                    age : 22,
                    sex : 'boy',
                    singleDog:true
                },
                {
                    name : '風从東方來',
                    age : 21,
                    sex : 'gay',
                    singleDog:true
                },
                {
                    name : '望轻舟(王钦洲)',
                    age : 23,
                    sex : 'boy',
                    singleDog:true
                },
                {
                    name : 'ReadMe',
                    age : 21,
                    sex : 'boy',
                    singleDog:true
                },
            ],
            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;

转载于:https://my.oschina.net/yongxinke/blog/858819