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')
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!