精华内容
下载资源
问答
  • JSX语法糖

    2017-07-31 09:51:12
    语法糖:语法糖(Syntactic sugar),是由Peter J. Landin(和图灵一样的天才人物,是他最先发现了Lambda演算,由此而创立了函数式编程)创造的一个词语,它意指那些没有给计算机语言添加...JSX语法糖JSX语法,像是在Javascr
    语法糖:语法糖(Syntactic sugar),是由Peter J. Landin(和图灵一样的天才人物,是他最先发现了Lambda演算,由此而创立了函数式编程)创造的一个词语,它意指那些没有给计算机语言添加新功能,而只是对人类来说更“甜蜜”的语法。语法糖往往给程序员提供了更实用的编码方式,有益于更好的编码风格,更易读。不过其并没有给语言添加什么新东西。

    JSX语法糖

    JSX语法,像是在Javascript代码里直接写XML的语法,实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,React 官方推荐使用JSX, 当然你想直接使用纯Javascript代码写也是可以的,只是使用JSX,组件的结构和组件之间的关系看上去更加清晰。

    JSX语法简介

    React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。

    一. 三元表达式

    var person = <Person name={window.isLoggedIn ? window.name : ''} />;
    上述代码经过JSX编译后会得到:
    
    var person = React.createElement(
      Person,
      {name: window.isLoggedIn ? window.name : ''}
    );

    二. 数组递归

    数组循环,数组的每个元素都返回一个React组件。
    
    var lis = this.todoList.todos.map(function (todo) {
      return  (
        <li>
          <input type="checkbox" checked={todo.done}>
          <span className={'done-' + todo.done}>{todo.text}</span>
        </li>
      );
    });
    
    var ul = (
      <ul className="unstyled">
        {lis}
      </ul>
    );

    三. 使用样式

    <div style={{color: '#ff0000', fontSize: '14px'}}>Hello World.</div>
    或者
    var style = {
      color: '#ff0000',
      fontSize: '14px'
    };
    
    var node = <div style={style}>HelloWorld.</div>;

    四.绑定事件

    JSX让事件直接绑定在元素上。
    
    <button onClick={this.checkAndSubmit.bind(this)}>Submit</button>
    和原生HTML定义事件的唯一区别就是JSX采用驼峰写法来描述事件名称,大括号中仍然是标准的JavaScript表达式,返回一个事件处理函数。
    
    React并不会真正的绑定事件到每一个具体的元素上,而是采用事件代理的模式:在根节点document上为每种事件添加唯一的Listener,然后通过事件的target找到真实的触发元素。这样从触发元素到顶层节点之间的所有节点如果有绑定这个事件,React都会触发对应的事件处理函数。这就是所谓的React模拟事件系统。尽管整个事件系统由React管理,但是其API和使用方法与原生事件一致。

    JSX注意事项

    1.开发依赖
    jsx语法依赖react.js和jsx的解析器。所以在它之前必须还引入这两种基础文件。
    react.js 、react-dom.js 和 browser.min.js ,它们必须首先加载。
    2.script标签声明
    script 标签的 type 属性为 text/babel,这是React 独有的 JSX 语法,跟 JavaScript 不兼容。凡是在页面中直接使用 JSX 的地方,都要加上 type=”text/babel”。

    展开全文
  • 浅谈JSX语法糖

    2020-04-18 21:03:39
    浅谈JSX语法糖 jsx简单觉得来说就是在javascript里面使用html文档。 JSX是一种语法糖,全称:javascript xml。 JSX语法不是必须使用的,但是因为使用了JSX语法之后会降低我们的开发难度,故而这样的语法又被成为语法...

    浅谈JSX语法糖

    jsx简单觉得来说就是在javascript里面使用html文档。
    JSX是一种语法糖,全称:javascript xml。
    JSX语法不是必须使用的,但是因为使用了JSX语法之后会降低我们的开发难度,故而这样的语法又被成为语法糖。
    看下面的DOM结构:

    <div class='app' id='appRoot'>
      <h1 class='title'>欢迎进入React的世界</h1>
      <p>
        React.js 是一个帮助你构建页面 UI 的库
      </p>
    </div>
    

    上面这个 HTML 所有的信息我们都可以用 JavaScript 对象来表示:

    {
      tag: 'div',
      attrs: { className: 'app', id: 'appRoot'},
      children: [
        {
          tag: 'h1',
          attrs: { className: 'title' },
          children: ['欢迎进入React的世界']
        },
        {
          tag: 'p',
          attrs: null,
          children: ['React.js 是一个构建页面 UI 的库']
        }
      ]
    }
    

    但是用 JavaScript 写起来太长了,结构看起来又不清晰,用 XML的方式写起来就方便很多了。

    于是 React.js 就把 JavaScript 的语法扩展了一下,让 JavaScript 语言能够支持这种直接在 JavaScript 代码里面编写类似 XML 标签结构的语法,这样写起来就方便很多了编译的过程会把类似 XML 的 JSX 结构转换成 JavaScript 的对象结构。

    下面代码:

    import React from 'react'
    import ReactDOM from 'react-dom'
    
    class App extends React.Component {
      render () {
        return (
          <div className='app' id='appRoot'>
            <h1 className='title'>欢迎进入React的世界</h1>
            <p>
              React.js 是一个构建页面 UI 的库
            </p>
          </div>
        )
      }
    }
    
    ReactDOM.render(
    	<App />,
      document.getElementById('root')
    )
    

    编译之后将得到这样的代码

    import React from 'react'
    import ReactDOM from 'react-dom'
    
    class App extends React.Component {
      render () {
        return (
          React.createElement(
            "div",
            {
              className: 'app',
              id: 'appRoot'
            },
            React.createElement(
              "h1",
              { className: 'title' },
              "欢迎进入React的世界"
            ),
            React.createElement(
              "p",
              null,
              "React.js 是一个构建页面 UI 的库"
            )
          )
        )
      }
    }
    
    ReactDOM.render(
    	React.createElement(App),
      document.getElementById('root')
    )
    

    React.createElement 会构建一个 JavaScript 对象来描述你 XML 结构的信息,包括标签名、属性、还有子元素等, 语法为

    React.createElement(
      type,
      [props],
      [...children]
    )
    

    所谓的 JSX 其实就是 JavaScript 对象,所以使用 React 和 JSX 的时候一定要经过编译的过程:

    JSX代码 — > 使用react构造组件,bable进行编译—> JavaScript对象 — ReactDOM.render()函数进行渲染—>真实DOM元素 —>插入页面.

    另外jsx特别要注意的是

    1. 标签必须要闭合。
    2. 最外层只能有一个根元素
    3. 写入样式要用className
    4. style = {{}}
    5. 写入事件的时候要用到驼峰命名法 如 onClick()
    <div onClick={this.handleClick}></div>
            如果handleClick需要内部用到this,那么我们可以通过两种方式解决this绑定问题
            1)通过在constructor函数里面进行this的bind
                constructor(){
                    super()
                    this.handleClick = this.handleClick.bind(this)
                }
                handleClick(){
                    console.log(this)
                }
            2)handleClick写成箭头函数
                handleClick = () => {
                    console.log(this)
                }
    
    1. input的value值必须要配合onChange才可以,否者的话就只是单纯的进行数据显示的话,只需要通过defaultValue即可。
    2. checkbox的checked耶要改成defaultchecked
    3. label的for需要改成htmlFor
    4. jsx的注释要写成{/**/}
    展开全文
  • react--JSX语法糖

    2020-09-01 17:49:26
    JSX语法糖 JSX是一种语法糖,全称:javascript xml JSX语法不是必须使用的,但是因为使用了JSX语法之后会降低我们的开发难度,故而这样的语法又被成为语法糖。 看下面的DOM结构: <div class='app' id='appRoot'&...

    JSX语法糖

    JSX是一种语法糖,全称:javascript xml

    JSX语法不是必须使用的,但是因为使用了JSX语法之后会降低我们的开发难度,故而这样的语法又被成为语法糖。

    看下面的DOM结构:

    <div class='app' id='appRoot'>
      <h1 class='title'>欢迎进入React的世界</h1>
      <p>
        React.js 是一个帮助你构建页面 UI 的库
      </p>
    </div>
    

    上面这个 HTML 所有的信息我们都可以用 JavaScript 对象来表示:

    {
      tag: 'div',
      attrs: { className: 'app', id: 'appRoot'},
      children: [
        {
          tag: 'h1',
          attrs: { className: 'title' },
          children: ['欢迎进入React的世界']
        },
        {
          tag: 'p',
          attrs: null,
          children: ['React.js 是一个构建页面 UI 的库']
        }
      ]
    }
    

    但是用 JavaScript 写起来太长了,结构看起来又不清晰,用 XML的方式写起来就方便很多了。

    于是 React.js 就把 JavaScript 的语法扩展了一下,让 JavaScript 语言能够支持这种直接在 JavaScript 代码里面编写类似 XML 标签结构的语法,这样写起来就方便很多了编译的过程会把类似 XML 的 JSX 结构转换成 JavaScript 的对象结构

    下面代码:

    import React from 'react'
    import ReactDOM from 'react-dom'
    
    class App extends React.Component {
      render () {
        return (
          <div className='app' id='appRoot'>
            <h1 className='title'>欢迎进入React的世界</h1>
            <p>
              React.js 是一个构建页面 UI 的库
            </p>
          </div>
        )
      }
    }
    
    ReactDOM.render(
    	<App />,
      document.getElementById('root')
    )
    

    编译之后将得到这样的代码:

    import React from 'react'
    import ReactDOM from 'react-dom'
    
    class App extends React.Component {
      render () {
        return (
          React.createElement(
            "div",
            {
              className: 'app',
              id: 'appRoot'
            },
            React.createElement(
              "h1",
              { className: 'title' },
              "欢迎进入React的世界"
            ),
            React.createElement(
              "p",
              null,
              "React.js 是一个构建页面 UI 的库"
            )
          )
        )
      }
    }
    
    ReactDOM.render(
    	React.createElement(App),
      document.getElementById('root')
    )
    

    React.createElement 会构建一个 JavaScript 对象来描述你 XML 结构的信息,包括标签名、属性、还有子元素等, 语法为

    React.createElement(
      type,
      [props],
      [...children]
    )
    

    在不使用JSX的时候,需要使用React.createElement来创建组件的dom结构,但是这样的写法虽然不需要编译,但是维护和开发的难度很高,且可读性很差

    所谓的 JSX 其实就是 JavaScript 对象,所以使用 React 和 JSX 的时候一定要经过编译的过程:

    JSX代码 — > 使用react构造组件,bable进行编译(React.createElement方法)—> JavaScript对象(虚拟dom) — ReactDOM.render()函数进行渲染—>真实DOM元素 —>插入页面

    另:

    • JSX就是在js中使用的xml,但是,这里的xml不是真正的xml,只能借鉴了一些xml的语法,例如:

    最外层必须有根节点、标签必须闭合

    • jsx借鉴xml的语法而不是html的语法原因:xml要比html严谨,编译更方便
    • react中jsx里的注释要写成{/* */}的方式
    展开全文
  • JSX语法糖-入门-进阶

    千次阅读 2018-04-24 20:31:11
    JSX语法糖-入门-进阶 本文在官方文档的基础上,进行了扩展扩展补充和一些解读。基本涵盖了JSX语法的细枝末节,JSX语法本身并不复杂,也容易掌握。本文供学习参考使用。 JSX语法糖-入门-进阶 一基础 1JSX是什么 2...

    JSX语法糖-入门-进阶

    本文在官方文档的基础上,进行了扩展扩展补充和一些解读。基本涵盖了JSX语法的细枝末节,JSX语法本身并不复杂,也容易掌握。本文供学习参考使用。


    一、基础

    1、JSX是什么

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

    它是一种JavaScript语法扩展,在React中可以方便地用来描述UI。

    本质上,JSX为我们提供了创建React元素方法(React.createElement(component, props, …children))的语法糖(syntactic sugar)。上面的代码实质上等价于:

    var element = React.createElement(
      "h1",
      null,
      "Hello, world!"
    );

    2、JSX代表JS对象

    JSX本身也是一个表达式,在编译后,JSX表达式会变成普通的JavaScript对象。
    重点内容
    你可以在if语句或for循环中使用JSX,你可以将它赋值给变量,你可以将它作为参数接收,你也可以在函数中返回JSX。
    例如下面的代码:

    function getGreeting(user) {
      if (user) {
        return <h1>Hello, {formatName(user)}!</h1>;
      }
      return <h1>Hello, Stranger.</h1>;
    }

    上面的代码在if语句中使用JSX,并将JSX作为函数返回值。实际上,这些JSX经过编译后都会变成JavaScript对象。
    经过babel会变成下面的js代码:

    function test(user) {
        if (user) {
            return React.createElement(
                "h1",
                null,
                "Hello, ",
                formatStr(user),
                "!"
            );
        }
        return React.createElement(
            "h1",
            null,
            "Hello, Stranger."
        );
    }

    3、在JSX中使用JavaScript表达式

    在JSX中插入JavaScript表达式十分简单,直接在JSX中将JS表达式用大括号括起来即可。例如:

    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')
    );

    上面的代码中用到了函数调用表达式fromatName(user)。

    在JavaScript中,表达式就是一个短语,Javascript解释器会将其计算出一个结果,常量就是最简单的一类表达式。常用的表达式有:

    • 变量名;
    • 函数定义表达式;
    • 属性访问表达式;
    • 函数调用表达式;
    • 算数表达式;
    • 关系表达式;
    • 逻辑表达式;

    需要注意的是,if语句以及for循环不是JavaScript表达式,不能直接作为表达式写在{}中,但可以先将其赋值给一个变量(变量是一个JavaScript表达式):

    function NumberDescriber(props) {
      let description;
      if (props.number % 2 == 0) {
        description = <strong>even</strong>;
      } else {
        description = <i>odd</i>;
      }
      return <div>{props.number} is an {description} number</div>;
    }

    4、JSX属性值

    你可以使用引号将字符串字面量指定为属性值:

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

    注意这里的”0”是一个字符串字面量。

    或者你可以将一个JavaScript表达式嵌在一个大括号中作为属性值:

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

    这里用到的是JavaScript属性访问表达式,上面的代码将编译为:

    const element = React.createElement("img", { src: user.avatarUrl });

    5、JSX的Children

    首先JSX可以是一个不包含Children的empty tag。如:

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

    JSX也可以像HTML标签一样包含Children:

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

    这种写法在生成React元素的时候给我们带来了很大的便利,而且能够更加直观地描述UI。不然我们需要像下面这样创建和上面代码等价的React元素:

    const element = React.createElement(
      "div",
      null,
      React.createElement(
        "h1",
        null,
        "Hello!"
      ),
      React.createElement(
        "h2",
        null,
        "Good to see you here."
      )
    );

    tip: React DOM结点使用骆驼拼写法给属性命名
    例如:class在JSX中应写作className,tabindex应写作tabIndex。

    另外关于JSX的children需要注意的是:

    React自定义组件的chilren是不会像固有的HTML标签的子元素那样自动render的,我们看下面的例子:

    代码1
    class Test extends React.Component {
        render() {
          return (
            <div>
              Here is a list:
              <ul>
                <li>Item 1</li>
                <li>Item 2</li>
              </ul>
            </div>
          ) 
        }
    };
    ReactDOM.render(
        <Test />,
        document.getElementById('test')
    );

    以上代码定义的组件中都是build-in组件,类似div、p、ul、li等。它们中的子元素会直接render出来,像下面这样:

    001

    但是如果你使用用户定义组件,比如:

    class Test extends React.Component {
        render() {
          return (
          <Em>
            Here is a list:
            <ul>
              <li>Item 1</li>
              <li>Item 2</li>
            </ul>
          </Em>
        ) 
        }
    };
    
    class Em extends React.Component {
      render() {
        return (<div></div>);
      }
    }
    
    ReactDOM.render(
        <Test />,
        document.getElementById('test')
    );

    并不能得到跟上面代码1一样的结果,我们得到的只是一个空的div标签:

    002

    如果你想得到和代码1一样的结果,需要显示地指定props.children,像下面这样:

    class Test extends React.Component {
        render() {
          return (
              <Em>
                Here is a list:
                <ul>
                  <li>Item 1</li>
                  <li>Item 2</li>
                </ul>
              </Em>
          ) 
        }
    };
    
    class Em extends React.Component {
      render() {
        return (<div>{this.props.children}</div>);
      }
    }
    
    ReactDOM.render(
        <Test />,
        document.getElementById('test')
    );

    得到下面的结果:

    003

    6、JSX可自动防范注入攻击

    在JSX中嵌入接收到的内容是安全的,比如:

    const danger = response.potentialDanger;
    
    cosnt ele = <h1>{title}</h1>

    在默认情况下,React DOM会将所有嵌入JSX的值进行编码。这样可以有效避免xss攻击。

    我们将以下代码编译后引入html:

    class Test extends React.Component {
        render() {
              let v = "<script><\/script>";
              return (
              <div>
                <h1>{v}</h1>
              </div>
            ) 
        }
    };
    
    ReactDOM.render(
        <Test />,
        document.getElementById('test')
    );

    得到结果是:

    004

    可以看到通过JSX插入的文本自动进行了HTML转义,所以这里插入的是一段文本,而不是

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
      </head>
      <body>
        <div id="test"></div>
        <script type="text/javascript">
          document.getElementById("test").innerHTML="<h1><script><\/script><\/h1>";
        </script>
      </body>
    </html>

    得到结果如下:

    005

    注意文本的颜色,此时插入的是一个script标签。

    如果你很清楚自己在做什么,希望直接将字符串不经转义编码直接插入到HTML文档流,可以使用dangerouslySetInnerHTML属性,这是一个React版的innerHTML,该属性接收一个key为__html的对象,修改代码如下:

          class Test extends React.Component {
                render() {
                  let v = {
                __html: "<script><\/script>"
              };
                  return (
                  <div>
                    <h1 dangerouslySetInnerHTML={v}/>
                  </div>
              ) 
                }
          };

    这次我们插入了script标签:

    006

    二、进阶

    1、JSX中的props

    指定JSX中的props有以下几种方式:

    (1)使用JavaScript表达式

    任何有效的JavaScript表达式都可以作为prop的值,使用的时候将该表达式放在一对大括号中即可:

    <MyComponent foo={1 + 2 + 3 + 4} />
    
    <YourComponent clickTodo={(id) => this.props.handleClick(id)} />

    (2)使用字符串字面量

    字符串字面量可以作为prop值,下面的代码是等价的:

    <MyComponent message="hello world" />
    
    <MyComponent message={'hello world'} />

    (3)使用扩展运算符

    如果你想将一个prop对象传入JSX,你可以使用扩展运算符…直接将整个prop对象传入。下面的2个组件是等价的:

    function App1() {
      return <Greeting firstName="Ben" lastName="Hector" />;
    }
    
    function App2() {
      const props = {firstName: 'Ben', lastName: 'Hector'};
      return <Greeting {...props} />;
    }

    扩展运算符是一个es6特性。是一种传递属性的十分便利的方式。但请注意不要滥用该运算符,注意不要将一大堆毫不相关的prop一股脑全部传入下面的组件中。

    2、JSX中的Children

    React组件中有一个特殊的prop–props.children。它指代了JSX表达式中开闭标签中包含的内容。

    下面讨论的是几种指定JSX的children的方法:

    (1)使用字符串字面量

    你可以直接在JSX的开闭标签中写入字符串字面量,组件得到的props.children就是该字符串值。

    以下面的代码为例:

    <MyComponent>Hello world!</MyComponent>

    MyComponent的props.chilren将获得”Hello World!”字符串。通过该方式传入的字符串是未经HTML转义的。实际上你只需要像在HTML标签中写入文本那样就可以了。例如你想在一对 p 标签中写入文本“script”,HTML和JSX写法是一样的,就像下面这样:

    <p>&#60;script&#62;&#60;/script&#62;</p>

    另外需要注意的是:

    JXS会自动删除一行中开头和结尾处的空白符;JSX会自动删除空行;JSX会删除紧邻标签的换行;JSX会删除字符串中的换行;字符串中的换行会被转换成一个空格。

    举例来说,下面的JSX代码都是等价的:

    <div>Hello World</div>
    
    <div> Hello World   </div>
    
    <div>
      Hello World
    </div>
    
    <div>
      Hello
      World
    </div>
    
    <div>
    
      Hello World
    </div>

    (2)JSX元素作为children

    我们同样可以使用JSX元素作为JSX的children,由此生成嵌套组件:

    <MyContainer>
      <MyFirstComponent />
      <MySecondComponent />
    </MyContainer>

    我们也可以混合使用字符串字面量和JSX作为children:

    <El>
      Here is a list:
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </El>

    El的props.children将得到一个数组:

    007

    可以看到数组的第一个元素就是字符串“Here is a list:”,第二个元素是一个对象(JSX代表JavaScript对象)。

    (3)JavaScript表达式

    和prop一样,你也可以将任何有效的JavaScript表达式作为children传入,将它放在{}中就可以了。像下面这样:

    <MyComponent>{'foo'}</MyComponent>

    这里传入了一个常量表达式。

    下面使用一个函数调用表达式来生成一个list作为children:

    function Item(props) {
      return <li>{props.message}</li>;
    }
    
    function TodoList() {
      const todos = ['finish doc', 'submit pr', 'nag dan to review'];
      return (
        <ul>
          {todos.map((message) => <Item key={message} message={message} />)}
        </ul>
      );
    }

    当然你也可以在一个字符串children中插入一个JavaScript表达式来生成一个“模板”:

    function Hello(props) {
      return <div>Hello {props.username}!</div>;
    }

    (4)函数children

    首先说明,这不是一种常见的用法。

    实际上,传入自定义组件的children并没有严格的限制,只要在React需要render的时候能将它们转换成可以render的东西就行了。

    下面是一个函数children的例子:

    function ListOfTenThings() {
      return (
        <Repeat numTimes={10}>
          {(index) => <div key={index}>This is item {index} in the list</div>}
        </Repeat>
      );
    }
    
    // Calls the children callback numTimes to produce a repeated component
    function Repeat(props) {
      let items = [];
      for (let i = 0; i < props.numTimes; i++) {
        items.push(props.children(i));
      }
      return <div>{items}</div>;
    }

    实际上,我们更通常的情况下是将(index) =>

    This is item {index} in the list
    作为一个prop传入子组件。这个例子只是作为一种理解上的扩展。

    (5)有关布尔值、Null以及Undefined

    布尔值,Null以及Undefined可以作为有效的children,但他们不会被render,下面的JSX表达式都会render一个空的div标签:

    <div />
    
    <div></div>
    
    <div>{false}</div>
    
    <div>{null}</div>
    
    <div>{true}</div>

    关于此有一个有趣的应用,在条件render中,下面的 Header 只有在show为true时才会render:

    <div>
      {showHeader && <Header />}
      <Content />
    </div>

    3、注意事项

    (1)使用JSX时要引入React库

    前面已经解释过了,JSX是React.createElement方法的语法糖,因此在使用JSX的作用域中必须引入React库。

    如果你使用了JS打包工具,你可以在文件的头部作如下引用:

    import React from 'react';

    或者你不使用打包工具,也可以直接通过script标签引入React,比如:

    //本地
    <script src="./react.js"></script>
    
    //或者BootCDN
    <script src="http://cdn.bootcss.com/react/15.4.0/react.js"></script>

    此时React将作为一个全局变量被引入,变量名就是’React’。

    (2)注意引入JSX中用到的自定义组件

    JSX中用到的组件可能并不会在JavaScript中直接引用到,但自定义组件本质上就是一个JS对象,你在JSX中使用的时候,需要首先将该组件引入到当前作用域:

    import MyComponent from './MyComponent.js'
    
    ...
    
    <Outer>
      <MyComponent />
    </Outer>

    (3)自定义组件首字母一定要大写

    JSX中小写字母开头的element代表HTML固有组件如div,span,p,ul等。用户自定义组件首字母一定要大写如Header、Picker。

    (4)元素标签名不能使用表达式

    下面的代码将产生错误:

    const components = {
      photo: PhotoStory,
      video: VideoStory
    };
    
    function Story(props) {
      // Wrong! JSX标签名不能使用表达式
      return <components[props.storyType] story={props.story} />;
    }

    如果你需要使用一个表达式来决定元素标签,你应该先将该表达式的值赋给一个大写字母开头的变量:

    const components = {
      photo: PhotoStory,
      video: VideoStory
    };
    
    function Story(props) {
      // Correct! JSX type can be a capitalized variable.
      const SpecificStory = components[props.storyType];
      return <SpecificStory story={props.story} />;
    }

    (5)设置style属性

    在设置标签style属性的时候,要注意,我们是将一个描述style的对象以JavaScipt表达式的形式传入。因此应该有2层大括号:

    <div style={{color:'red', margin:'10px auto'}}></div>

    结语

    JSX在React中使用给我们带来了很大的便利,JSX的语法实际上十分简单也很容易掌握。祝学习愉快。

    原文地址:JSX语法详解,转载请注明出处。

    展开全文
  • 简单介绍jsx语法糖 JSX不能直接运行,是被babel-loader中的react这个preset翻译的 翻译前 class App extends React.Component{ render(){ return &amp;amp;amp;lt;h1&amp;amp;amp;gt;Hello World!&...
  • react的jsx语法糖

    2020-03-08 07:57:14
    声明式语法更直观,于heml结构相同,降低了学习成本 执行更快,因为它在编译了javascript代码后进行了优化 它是类型安全的,在编译过程中就能发现错误 使用jsx编写模板更加简单快速 2.jsx的使用 // jsx创建...
  • 在项目开发中,通常会用到jsx语法糖,但是vue中的指令在其中是失效的。 想要实现一下效果图: 在项目开发中数组的map方法超高频,我们的解决方案也是用到了map方法 map方法:...
  • 二、简单介绍jsx语法糖 jsx不能直接运行 ,是被babel - loader 中的react这个preset翻译的 翻译前: 翻译后: 必须注意: (1)被一个单独的大标签包裹,比如div或者section ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,088
精华内容 1,235
热门标签
关键字:

jsx语法糖