ReactJS - JSX

React使用JSX进行模板化而不是常规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>
            <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

We不能在JSX中使用 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建议使用内联样式.当我们想要设置内联样式时，我们需要使用 camelCase 语法. React还会在特定元素的数值后自动附加 px .以下示例显示如何将 myStyle 内联添加到 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

在编写注释时，我们需要在标记的子部分中写注释时使用大括号 {} .在撰写评论时总是使用 {} 是一个好习惯，因为我们希望在编写应用程序时保持一致.

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;