[JavaScript知识库]jsx简介

jsx简单案例

说到react，就不得不提jsx。其实jsx，简单来说就是JavaScript的语法拓展。将jsx和UI放在一起的时候，能够显示更多的警告消息和错误。接下来就通过案例来简单对这个东西进行介绍吧！

 <!-- 此处创建一个dom元素，用来接收render传过来的数据 -->
    <div id="root"></div>

 function formatName(user){
        return user.firstName + ' ' + user.lastName;
    }

    const user = {
        firstName: 'Harper',
        lastName: 'perez'
    };

    const element = (
        <h1>
          Hello,{formatName(user)}!    
        </h1>
    );
    
    //通过render将创建的元素送到指定的位置
    ReactDOM.render(
        element,
        document.getElementById('root')
    );

jsx特定属性

jsx可以通过引号，来讲属性值指定为字符串的字面量

// (1)使用引号，将属性值制定为字符串的字面量
const element = <div tabIndex="0"></div>;

使用大括号，将属性值中插入一个JavaScript表达式：

// (2)使用大括号，在属性值中插入一个JavaScript表达式
// 同时可以使用 />来闭合标签，就像XML语法一样
const element = <img src={user.avatarUrl}></img>;

// (3)jsx标签里面能够包含很多子元素
    const element = (
        <div>
          <h1>Hello!</h1>   
          <h2>Good to see you here</h2>
        </div>
    )

jsx表现对象

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新。