React学习(二) React基础JSX

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

JSX

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

• 嵌入表达式

  const name = 'Jeff';
  const el = <h1>Hello, { name }</h1>;
  

  在jsx中的表达式必须要用大括号括起来，这样react才会解析你的表达式。而且在大括号中我们还可以写方法调用，计算等。

  function formatName(user) {
   return user.firstName + ' ' + user.lastName
  }
  const user = {
   firstName: 'Jeff',
   lastName: 'Wang'
  }
  cosnt el = <h1>Hello, { formatName(user) }</h1>
  

• 在for循环或if判断中使用JSX

  // if 判断中使用jsx
  function getGreeting(user) {
    if (user) {
      return <h1>Hello, { formatName(user) }!</h1>
    } else {
      return <h1>Hello, Stranger.</h1>
    }
  }
  
  // for 循环使用
    const list = [
      { id: 1, title: 'this is news 1' },
      { id: 2, title: 'this is news 2' }
    ]
    const listEl = list.map((v, i) => (
      <li key={v.id}>{v.title}</li>
    ))
   // 注意上面箭头函数后面我跟了一个 ()，它等价于 => {return <li key={v.id}>{v.title}</li> }
  

使用注意点

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

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