ReactJS JSX

ReactJS JSX

React使用JSX进行模板化，而不是使用普通的JavaScript。因为没有必要使用Javascript，但是，下面是一些它的利弊。

  • 它更快，因为它在将代码编译为JavaScript时执行优化。
  • 它也是类型安全的，在编译过程中大部分错误都可以被捕获。
  • 如果熟悉HTML，则可以更轻松，更快地编写模板。

使用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很相似，但在处理JSX时还需要记住一些事项。

嵌套的元素

如果想返回更多的元素，需要用一个容器元素来包装它。注意这里我们如何使用div作为h1，h2和p元素的包装。

文件：App.jsx - 

import React from 'react';

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

运行上面示例代码，得到以下结果 -

属性

除了常规的HTML属性外，还可以使用自己的自定义属性。 当想要添加自定义属性时，需要使用数据前缀。在下面的例子中，我们添加了data-myattribute作为p元素的一个属性。

文件：App.jsx - 

import React from 'react';

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

JavaScript表达式

JavaScript表达式可以在JSX中使用。只需要用大括号{}来包装它。 以下示例将呈现数字：2。

文件：App.jsx - 

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>结果值为：{1+1}</h1>
         </div>
      );
   }
}
export default App;

执行上面示例代码，得到以下结果 -

不能在JSX中使用if else语句，而是使用条件(三元)表达式。 在下面的例子中，变量i等于1，所以浏览器将呈现为真，如果将其更改为其他值，它将呈现false。

文件：App.jsx - 

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建议使用内联样式。当想要设置内联样式时，需要使用驼峰(camelCase)语法。 React还会在特定元素的数值后自动附加px。以下示例显示如何将myStyle内联添加到h1元素。

文件：App.jsx - 

import React from 'react';

class App extends React.Component {
   render() {
      var myStyle = {
         fontSize: 40,
         color: 'green'
      }
      return (
         <div>
            <h1 style = {myStyle}>Header</h1>
         </div>
      );
   }
}
export default App;

执行上面示例代码，得到以下结果 -

注释

在写注释时，我们需要在想要在标签的子部分写注释的时候放上大括号{}。 在编写注释时总是使用{}是一个好习惯，因为我们希望在编写应用程序时保持一致。如下代码所示 - 

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;

命名约定

HTML标签总是使用小写的标签名称，而React组件以大写字母开头。

注意 - 应该使用className和htmlFor作为XML属性名称，而不是class和for。

这在React官方页面上解释为 -
由于JSX是JavaScript，所以不鼓励使用类和标识符等标识符作为XML属性名称。 React DOM组件期望使用DOM属性名称，例如className和htmlFor。


目录
ReactJS JSX