React开发教程5:JSX

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, h2p 的容器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;

react_jsx_wrapper

属性

除了标准的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;
react_jsx_inline_javascript

你不能再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_jsx_ternary_expression

式样

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_jsx_inline_style


注释

在一个标签的子元素区域加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 作为首字母开始的。

注意

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

这里是 React 官方的解释。

因为 JSX 是 JavaScript, classfor 不适合作为 XML 的属性名。因此, React DOM 组件使用 classNamehtmlFor 对应 DOM 属性。

 

发表评论

您的电子邮箱地址不会被公开。