介绍JSX

作者: ZMJun | 来源:发表于2017-06-27 11:11 被阅读37次

    本文是本人自己辛苦翻译的,请转载的朋友注明,翻译于Z.MJun的简书 ,感谢!<翻译不容易啊>


    翻译于2017年6月27日,原文


    变量描述

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

    这个Tag标识并不是String,也不是HTML>。这个标识是Js的一种扩展语法。推荐使用JSX来开发react。

    以下说说JSX的基础内容

    Embedding Expressions in JSX

    可以嵌入任意的JS扩展到JSX的括号里面,如2+2user.fristNameformatName(user)都可以有以下表达方式

    function formatName(user) {
      return user.firstName + ' ' + user.lastName;
    }
    
    const user = {
      firstName: 'Harper',
      lastName: 'Perez'
    };
    
    const element = (
      <h1>
        Hello, {formatName(user)}!
      </h1>
    );
    
    ReactDOM.render(
      element,
      document.getElementById('root')
    );
    

    代码规范在这里就不多说了,不过可以参考以上写法,这样可读性比较强,不容易出错。

    Specifying Attributes with JSX

    使用JSX指定属性。
    可以使用引号指定字符嵌入属性中

    const element = <div tabIndex="0"></div>;
    

    也可以使用大括号把JS代码嵌入到属性中

    const element = <img src={user.avatarUrl}></img>;
    

    注意:使用引号里面只能是string类型,不能是JS代码。大括号内只能是JS代码,不能是string类型。两者不能混淆。

    Specifying Children with JSX

    JSX的children
    如果一个标签是空着,后面必须添加/>,如XML

    const element = <img src={user.avatarUrl} />;
    

    JSX的标签包含子元素

    const element = (
      <div>
        <h1>Hello!</h1>
        <h2>Good to see you here.</h2>
      </div>
    );
    

    特别注意:
    JSX并不是HTML,而是JS。所以在命名的时候不要使用HTML的风格,应当使用JS的camelCase驼峰试命名。

    JSX Prevents Injection Attacks

    必须提前声明所要嵌入的JS变量,如

    const title = response.potentiallyMaliciousInput;
    // This is safe:
    const element = <h1>{title}</h1>;
    

    未经申明的内容,不能提前嵌入。

    JSX Represents Objects

    JSX对象表达式,以下两个表达式都是一个意思

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

    如果使用React.createElement()来表达,会更好,能明显的减少问题发生。

    // Note: this structure is simplified
    const element = {
      type: 'h1',
      props: {
        className: 'greeting',
        children: 'Hello, world'
      }
    };
    

    这个构建函数叫React elements。React元素。

    提示:
    如果选择使用ES6和JSX,建议了解下"Babel"的知识。


    相关文章

      网友评论

          本文标题:介绍JSX

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