介绍JSX

本文是本人自己辛苦翻译的，请转载的朋友注明，翻译于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+2，user.fristName和formatName(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"的知识。

---