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包装

属性

除了常规的HTML属性和属性外，我们还可以使用自己的自定义属性。当我们想要添加自定义属性时，我们需要使用数据前缀。在下面的例子中，我们添加了 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内联Javascript

我们不能在JSX中使用 else 语句，而是使用 条件（三元） 表达式。在下面的例子中，变量 i 等于 1，所以浏览器将呈现为真，如果我们将其更改为其他值，它将呈现为 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三元表达式

造型

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内联样式

注释

在编写评论时，我们需要在想要在标记的子节中写评论时使用大括号 {} 。在写评论时总是使用 {} 是一种好习惯，因为我们希望在编写应用时保持一致。

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 。