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'。

嵌入表达式

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

使用注意点

jsx中有的html属性需要大写，例如 class需要写成className，click 需要写成onClick等，并且每一项都是驼峰命名，如果你写成tabindex是不生效的。
标签闭合，假如你只是一个子元素可以直接写成 <InputBox />

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

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

React学习(二) React基础JSX

JSX

猜你喜欢

热点阅读