React 基础_JSX

JSX简介

JSX是一种用于描述UI的JavaScript扩展语法，React使用这种语法描述组件的UI。

JSX语法

基本语法

JSX的基本语法和XML语法相同，都是使用成对的标签构成一个树状结构的数据

    const element = (
        <div>
            <h1>Hello.world!</h1>
        </div>
    )

标签类型

• DOM类型标签 (首字母必须小写)
• 组件类型标签 (首字母必须大写)

    //DOM类型标签
    const element = <h1>hello,world!</h1>;
    //React组件类型标签
    const element = <HelloWorld />;
    //二者可以互相嵌套使用
    const element = (
        <div>
            <HelloWorld />
        </div>;
    );

JavaScript表达式

在JSX中使用JavaScript表达式需要将表达式用大括号“{}”包起来

使用场景：

• 通过表达式给标签属性赋值
• 通过表达式定义子组件

    //通过表达式给标签属性赋值
    const element = <MyComponent foo={1+2} />
    //通过表达式定义子组件(mao虽然是函数，但它的返回值是JavaScript表达式)
        const todos = ['item1', 'item2', 'item3'];
        const element = (
            <ul>
                {todos.map(message => <Item key={message} message={message} />}
            </ul>
        );

标签属性

• 部分属性名称改变(class写成className)
• 事件属性名采用驼峰格式(onclick写成onClick)

  注释

  JSX中的注释需要用大括号“{}”将/**/包裹起来

  const element = (
      <div>
          {/* 这里是一个注释 */}
          <span>React</span>
      </div>
  )

  JSX不是必须的

  JSX语法只是React.createElement(component, props, ...chilren)的语法糖，所有的JSX语法最终都会被转换成这个方法的调用

  //JSX语法
  const element = <div className='foo'>Hello,React</div>
  //转换后
  const element = React.createElement('div', {className: 'foo'}, 'Hello,React')

本作品采用《CC 协议》，转载必须注明作者和本文链接