美文网首页
JSX核心语法

JSX核心语法

作者: wpLishuai | 来源:发表于2020-08-26 22:00 被阅读0次

    JSX简介

    const element = <h1>Hello, world!</h1>;
    

    这个html标签和js的结合体就是JSX,JavaScript的扩展语法。在React中JSX会被创建React元素,并最终渲染成DOM元素。JSX将html写在js中,也就是UI和事件整合成一个更小的整体(也就是后面的要学的组件)。传统的方式都是Html、CSS、JavaScript分开写的,vue中常用的模板方式中也是在一个文件中分开写(template、script、style)。React的设计哲学认为所有的代码都是可以写到js中,all-in-js。这样相比分离的写法可以很简洁的创建一个组件,相比vue的组件会更加灵活便捷。

    JSX嵌入表达式

    const msg = "Hello React!";
    const ele = <h1>{msg}</h1>
    
    ReactDOM.render(
      ele,
      document.getElementById("root")
    )
    

    在这个例子中声明了一个文本变量msg,并使用大括号{}包裹这个变量。JSX中一律使用大括号{}包裹表达式,表达式一定要是合法的JavaScript表达式。下面列举几种常用的形式

    1、字面量

    const name = "James";
    const ele = <h2>Hello {name}!</h2>
    

    2、数学表达式

    const ele = <h2>{3 * 6}</h2>
    

    3、函数调用

    const user = {
      firstName: "Dany",
      lastName: "Green"
    }
    function format(aUser) {
      return aUser.firstName + ' ' + aUser.lastName
    }
    const ele = <h2>{format(user)}</h2>
    

    4、三目运算

    const isLogin = false;
    const ele = <h2>{!isLogin ? "登录" : "欢迎回来~"}</h2>
    

    JSX也可以作为表达式

    JSX编译之后生成JavaScript函数,调用该函数会返回一个JavaScript对象。因此JSX可以作为一个参数和返回值使用。JSX作为一个变量使用已经在上面的例子见过了。

    // 作为返回值
    function getGreeting(user) {
      if (user) {
        return <h1>Hello, {format(user)}!</h1>;
      }
      return <h1>Hello, Stranger.</h1>;
    }
    

    作为参数

    // 作为参数
    function greeting(user) {
      return <div style={{ display: 'flex' }}>Hello, {user}</div>
    }
    const name = "James";
    const user = (
      <div style={{ display: 'flex' }}>
        <h2>{name}</h2>
        <img src={avatarUrl} style={{ width: 100, height: 100, borderRadius: '50%' }} />
      </div>
    )
    
    ReactDOM.render(
      greeting(user),
      document.getElementById("root")
    )
    

    JSX 特定属性

    const avatarUrl = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598435934705&di=d1629d7ac009896c4118297e1a05f5ce&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201707%2F10%2F20170710210234_y3Kf5.jpeg"
    
    const ele = <img src={avatarUrl} style={{ width: 100, height: 100, borderRadius: '50%' }} />
    

    src后面不能使用引号包裹住花括号{},也不能在花括号中使用双引号包裹变量。

    不允许 src="{avatarUrl}"

    不允许 src={"avatarUrl"}

    JSX中的注释

    class App extends React.Component {
      render() {
        return (
          <div>
          {/* 我是一段注释 */}
          <h2>Hello World</h2>
          </div>
        )
      }
    }
    ReactDOM.render(<App />, document.getElementById("root"))
    

    JSX中嵌入数据

    1、可以正常显示的数据类型有String,Number,Array

    class App extends React.Component {
      constructor() {
        super()
        this.state = {
          name: "James",// String
          age: 18, // Number
          names: ["abc", "cba", "nba"] // Array
        }
      }
      render() {
        return (
          <div>
          <h3>{this.state.name}</h3>
          <h3>{this.state.age}</h3>
          <h3>{this.state.names}</h3>
          </div>
        )
      }
    }
    

    2、对象不能作为JSX住的子类

    class App extends React.Component {
      constructor() {
        super()
        this.state = {
          user: {
            name: 'Kobe',
            age: 40
          }
        }
      }
      render() {
        return (
          <div>
          {this.state.user}
          </div>
        )
      }
    }
    

    直接报错<u>Uncaught Error: Objects are not valid as a React child (found: object with keys {name, age}). If you meant to render a collection of children, use an array instead.</u>,如下:

    WX20200826-154138@2x.png

    3、Boolean、null、undefined不能渲染出来内容

    class App extends React.Component {
      constructor() {
        super()
        this.state = {
          test1: null, // null
          test2: undefined, // undefined
          test3: true, // Boolean
          flag: true,
        }
      }
      render() {
        return (
          <div>
            <h3>test1 : {this.state.test1}</h3>
            <h3>test1 : {this.state.test2}</h3>
            <h3>test1 : {this.state.test3}</h3>
            <h3>flag : {this.state.flag}</h3>
                </div>
            )
        }
    }
    

    显示效果图如下


    WX20200826-154845@2x.png

    可以通过+ ""显示

    render() {
      return (
        <div>
          <h3>test1 : {this.state.test1 + ""}</h3>
          <h3>test1 : {this.state.test2 + ""}</h3>
          <h3>test1 : {this.state.test3 + ""}</h3>
          <h3>flag : {this.state.flag + ""}</h3>
            </div>
        )
    }
    

    显示效果如下:


    WX20200826-155118@2x.png

    相关文章

      网友评论

          本文标题:JSX核心语法

          本文链接:https://www.haomeiwen.com/subject/xptqsktx.html