初学React系列

React学习(二) React基础JSX

2018-11-05  本文已影响0人  IT_枭枫

上一篇文章我们介绍了 React的使用,并在通过了解create-react-app生成的目录结构后写了自己的第一个React程序。这一次我们讲系统讲解一下React的基础内容。

JSX

const element = <h1>Hello, world!</h1> 这个既不是字符串也不是HTML,这个就是JSX的语法,注意在使用JSX语法的时候一定要先引入 React,也就是 import react from 'react'

使用注意点

  1. jsx中有的html属性需要大写,例如 class需要写成className,click 需要写成onClick等,并且每一项都是驼峰命名,如果你写成tabindex是不生效的。
  2. jsx 自动做了防止注入攻击,如果你像输出一个带html标签的内容,需要写成如下格式<h1 dangerouslySetInnerHTML={{__html: 'cc &copy; 2015'}}></h1> 这样就可以完整输出你的内容。
  3. 标签闭合,假如你只是一个子元素 可以直接写成 <InputBox />
  4. jsx 是一个对象,js中使用需要利用babel转成js对象,例如:
      const element = (
        <h1 className="greeting">
        Hello, world!
       </h1>
      ); 
      //  上面的jsx 等价于
      const element = React.createElement(
        'h1',
        {className: 'greeting'},
        'Hello, world!'
      );
      // 也等价于
      const element = {
        type: 'h1',
        props: {
          className: 'greeting',
          children: 'Hello, world'
        }
      };
    

今天我们就学这么多内容,有什么问题可在留言去留言,有 不足指出请大家指出。

上一篇 下一篇

猜你喜欢

热点阅读