JSX

2023-11-02 20:00:46

JSX

jsx 是js的拓展语言，JavaScript XML，本质还是js

1>jsx中的表达式

在jsx中如果需要使用 js 表达式，需要写在 {} 内

    <div id="app">
    </div>
    <script type="text/babel">
        //jsx表达式
     var name='小明';
     class Father extends React.Component{
         render(){
             return <h2>{name}</h2>
         }
     }
     ReactDOM.render(<Father></Father>,document.getElementById("app"))
    </script>

2> jsx本身也是一个表达式

  <div id="app">
    </div>
    <script type="text/babel">
        //jsx表达式
     var h=<h2>hello</h2>
     class Father extends React.Component{
         render(){
             return h
         }
     }
     ReactDOM.render(<Father></Father>,document.getElementById("app"))
    </script>

注意：这里不需要加{}，因为jsx本身就是一个表达式并且赋值给了h，所以return的时候只需要返回变量就可以

3>属性

无论在jsx内容还是属性还是jsx本身，它可以使用我们的js表达式

<div id="app">
    </div>
    <script type="text/babel">
        //jsx表达式
        var box='box'
     class Father extends React.Component{
         render(){
             return <h2 id={box}>hello</h2>
         }
     }
     ReactDOM.render(<Father></Father>,document.getElementById("app"))
    </script>

4>className

jsx中不能使用 class 给元素添加类名，jsx中jsx本身也是js，在js中class是js的关键字，使用className给元素添加类目

class Father extends React.Component{
         render(){
             return <h2 className={box}>hello</h2>
         }
     }

如果这里不使用className的话，控制台就会报错

5> jsx自动展开数组

    <div id="app">
    </div>
    <script type="text/babel">
        //jsx自动展开数组
     var arr=['小明','小红','小刚']
     class Father extends React.Component{
         render(){
             return <h2 >{arr}</h2>
         }
     }
     ReactDOM.render(<Father></Father>,document.getElementById("app"))
    </script>

数组内部也可以存放标签

<div id="app">
    </div>
    <script type="text/babel">
        //jsx自动展开数组
     var arr=[<p>小明</p>,<p>小红</p>,<p>小刚</p>]
     class Father extends React.Component{
         render(){
             return <h2 >{arr}</h2>
         }
     }
     ReactDOM.render(<Father></Father>,document.getElementById("app"))
    </script>

页面此时也会加载，但是我们会发现控制台有错误提示，每一个子元素应该有有一个唯一标识

此时给每一个元素添加一个key，便不会报错了

var arr=[<p key="a">小明</p>,<p key="b">小红</p>,<p key="c">小刚</p>]

6>三元运算

 <div id="app">
    </div>
    <script type="text/babel">
        //jsx自动展开数组
     var a=true;
     class Father extends React.Component{
         render(){
             return <div>{a?<h2>hello</h2>:null}</div>
         }
     }
     ReactDOM.render(<Father></Father>,document.getElementById("app"))
    </script>

这两种方法时等价的

return <div>{a?<h2>hello</h2>:<h2>world</h2>}</div>
return <div> {a&&<h2>hello</h2>}</div>

7>jsx 循环

推荐使用map 方法，不要使用 for 循环

<div id="app">
    </div>
    <script type="text/babel">
        //jsx循环
        var arr=[{id:1,name:'小明'},{id:2,name:'小红'},{id:3,name:'小刚'}]
        class Person extends React.Component{
            render(){
                return <div>
                          <ul>
                            {
                                arr.map(function(item,index){
                                    return <li key={index}>{item.id}:{item.name}</li>
                                }) 
                            } 
                          </ul>
                       </div>
            }
        }
        ReactDOM.render(<Person></Person>,document.getElementById("app"))
    </script>

8>事件

on+事件名给组件标签添加事件

事件名首字母必须大写
类组件中的jsx中的this指向组件实例对象

<div id="app">
    </div>
    <script type="text/babel">
        // function fun(){
        //     console.log('我触发了',)   //函数可以写在这里
        // }
        class Person extends React.Component{
            fun(){
                console.log('我触发了')   //也可以写在这里
            }
            render(){
                console.log(this)
                return <div>
                        <button onClick={this.fun}>按钮</button>
                       </div>
            }
        }
        ReactDOM.render(<Person></Person>,document.getElementById("app"))
    </script>

函数传参，默认传递一个参数是事件对象

 fun(e){
                console.log('我触发了',e)
            }

手动指定传入的参数值

  <div id="app">
    </div>
    <script type="text/babel">
        class Person extends React.Component{
            fun(e,a){
                console.log('我触发了',e)
                console.log(a)
            }
            render(){
                return <div>
                        <button onClick={()=>{this.fun('hello')}}>按钮</button>
                       </div>
            }
        }
        ReactDOM.render(<Person></Person>,document.getElementById("app"))
    </script>

通过bind方式传入我们自己规定的参数

  <button onClick={this.fun.bind(null,'hello')}>按钮</button>

码农公寓

JSX