美文网首页
【二】React之JSX

【二】React之JSX

作者: 一个无趣的人W | 来源:发表于2020-03-27 10:34 被阅读0次

    我是个医生,有疯子开的证明

    疯子

    一、 使用JSX

    利用 JSX 编写 DOM 结构,可以用原生的 HTML 标签,也可以直接像普通标签一样引用 React 组件。这两者约定通过大小写来区分,小写的字符串是 HTML 标签,大写开头的变量是 React 组件

    使用HTML标签:

    import React from 'react';
    import { render } from 'react-dom';
    
    var myDivElement = <div className="foo" />;
    render(myDivElement,document.getElementById('mountNode'));
    

    HTML 里的 class 在 JSX 里要写成 className,因为 class 在 JS 里是保留关键字。同理某些属性比如for 要写成 htmlFor

    使用组件:

    import React from 'react';
    import { render } from 'react-dom';
    import MyComponent from './MyComponet';
    
    var myElement = <MyComponent someProperty={true}>
    render(myElement,document.body);
    

    二、 使用JavaScript 表达式

    属性值使用表达式,只要用 { } 替换 " ":

    // Input (JSX):
    var person = <Person name={window.isLoggedIn ? window.name : ''} />;
    // Output (JS):
    var person = React.createElement(
      Person,
      {name: window.isLoggedIn ? window.name : ''}
    );
    

    子组件也可以作为表达式使用:

    // Input (JSX):
    var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
    // Output (JS):
    var content = React.createElement(
      Container,
      null,
      window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
    );
    

    三、注释

    沿用 JavaScript,唯一要注意的是在一个组件的子元素位置使用注释要用 { } 包起来。

    var content = (
      <Nav>
          {/* child comment, put {} around */}
          <Person
            /* multi
               line
               comment */
            name={window.isLoggedIn ? window.name : ''} // end of line comment
          />
      </Nav>
    );
    

    四、转义

    React 会将所有要显示到 DOM 的字符串转义,防止 XSS。所以如果 JSX 中含有转义后的实体字符比如(& copy;) (©) 最后显示到 DOM 中不会正确显示,因为 React 自动把 © 中的特殊字符转义了。有几种解决办法:

    • 直接使用 UTF-8 字符 ©
    • 使用对应字符的 Unicode 编码,查询编码
    • 使用数组组装 <div>{['cc ', <span>©</span>, ' 2015']}</div>
    • 直接插入原始的 HTML
    <div dangerouslySetInnerHTML={{__html: 'cc &copy; 2015'}} />
    

    五、自定义HTML属性

    如果在 JSX 中使用的属性不存在于 HTML 的规范中,这个属性会被忽略。如果要使用自定义属性,可以用 data- 前缀。可访问性属性的前缀 aria- 也是支持的。

    支持的标签和属性
    如果你要使用的某些标签或属性不在这些支持列表里面就可能被 React 忽略,必须要使用的话可以提 issue,或者用前面提到的 dangerouslySetInnerHTML

    六、属性扩散

    给组件设置多个属性或者甚至不知道这些属性的名称,这时候 spread attributes 功能就很有用了。
    比如:

    var props = {};
    props.foo = x;
    props.bar = y;
    var component = <Component {...props} />;
    

    props对象的属性会被设置成Component的属性。
    属性也可以被覆盖:

    var props = { foo: 'default' };
    var com ponent = <Component {...props} foo={'override'} />;
    console.log(component.props.foo);  // 'override' 后面的属性值会覆盖前面的属性
    

    七、关于 ... 操作符

    ES6语法中:
    展开语法(Spread syntax), 可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开;还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。(注: 字面量一般指 [1, 2, 3] 或者 {name: "mdn"} 这种简洁的构造方式)

    function sum(x, y, z) {
      return x + y + z;
    }
    
    const numbers = [1, 2, 3];
    
    console.log(sum(...numbers));
    // expected output: 6
    
    console.log(sum.apply(null, numbers));
    // expected output: 6
    

    ES7语法中:
    剩余属性:接收其余的变量,类似python中的**kwargs

    let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
    x;  // 1
    y;  // 2
    z;  // { a: 3, b: 4 }
    

    延伸属性:将枚举的值赋值到变量上

    let n = { x, y, ...z};
    n; // { x: 1,y: 2, a: 3, b: 4 }
    

    八、JSX与HTML的差异

    • 注意保留关键字起名不能冲突,例如:class要写成className
    • style 属性接收由CSS属性构成的JS对象
    • onChange 事件表现更接近我们的直觉(不需要onBlur去触发)
    • 表单的表现差异比较大
      更多异同,可以参见 DOM Differences

    注:onblur 事件会在对象失去焦点时发生。onblur 事件在用户离开输入框时执行 JavaScript 代码

    相关文章

      网友评论

          本文标题:【二】React之JSX

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