React开发教程5：JSX

本教程由好办法汇总原创

React的模板中采用的是JSX，而不是标准的JavaScript。
虽然不是必须要使用JSX。但采用JSX有很多好处。

• JSX性能较快，当它编译成JavaScript时它进行了优化处理。
• JSX是更安全的，它在编译时就会及时报错。
• 对于熟悉HTML的开发者，用JSX来写模板template是较为简单和快捷的。

使用JSX

大多数情况，JSX语法和标准的HTML相似。
这里我们看下App.jsx中是如何实现div的。

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}

export default App;

尽管和HTML基本相似，这里有几个值得注意的地方。

层级元素 Nested Elements

如果你想返回return多个元素，你需要把它们放在一个container元素中。

这里注意我们使用 div 作为 h1, h2 和 p 的容器wrapper。

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p>This is the content!!!</p>
         </div>
      );
   }
}

export default App;

属性

除了标准的HTML的属性，你可以使用自定义的属性。当你需要使用自定义的属性，请加上 data- 前缀。下面例子中，我们添加了data-myattribute 作为 p 元素的一个属性。

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p data-myattribute = "somevalue">This is the content!!!</p>
         </div>
      );
   }
}

export default App;

 

JavaScript 表达式

JavaScript 表达式可以在JSX中使用。. 你只需要加上花括号 {} 使用。 下面例子会返回 2 。

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{1+1}</h1>
         </div>
      );
   }
}

export default App;


你不能再JSX中使用 if else 语句。但你可以使用条件表达式 conditional (ternary) 替代if else语句。 
下面例子中变量 i 等于 1 ，浏览器会返回true。
如果我们用其他值，就会返回 false.

import React from 'react';

class App extends React.Component {
   render() {

      var i = 1;

      return (
         <div>
            <h1>{i == 1 ? 'True!' : 'False'}</h1>
         </div>
      );
   }
}

export default App;

式样

React推荐使用 inline 式样。当你定义 inline 式样，你需要依照camelCase 语法命名规则。在添加某个元素具体数字后，React会自动添加 px 。如下面例子中，就可以看到是如何添加 myStyle inline式样到 h1 元素中。

import React from 'react';

class App extends React.Component {
   render() {

      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      }

      return (
         <div>
            <h1 style = {myStyle}>Header</h1>
         </div>
      );
   }
}

export default App;

注释

在一个标签的子元素区域加React注释，需要放在花括号{} 中。一般来讲最好尽量使用 {} 花括号注释，这样可以保持代码的一致性。

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            {//End of the line Comment...}
            {/*Multi line comment...*/}
         </div>
      );
   }
}

export default App;

React命名规则

HTML标签是使用小写 lowercase 的标签名。然而， React的组件命名是以大写字母Uppercase 作为首字母开始的。

注意

你需要使用 className 和 htmlFor 作为 XML的class and for属性名。

这里是 React 官方的解释。

因为 JSX 是 JavaScript, class 和 for 不适合作为 XML 的属性名。因此, React DOM 组件使用 className 和 htmlFor 对应 DOM 属性。