React-JSX的简单注意事项_react jsx data-

React使用JSX代替常规JavaScript进行模板化。不必要使用它，但是，下面是一些附带的优点。

• 它更快，因为它在将代码编译为JavaScript时执行优化。

• 它也是类型安全的，大多数错误都可以在编译期间捕获。

• 如果您熟悉HTML，则可以更轻松快捷地编写模板。

使用JSX

在大多数情况下，JSX看起来像常规HTML。查看App.jsx中返回div的代码。

import React from 'react';
 
class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}
export default App;

尽管它与HTML相似，但是在使用JSX时我们需要牢记一些注意事项。

嵌套元素

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

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-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内部使用。我们只需要用大括号{}来包装它。

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，因此浏览器将呈现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;

css

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;

注释

编写注释时，如果要在标签的子代部分中编写注释，则需要使用大括号{}。最好在编写评论时使用{}，因为我们希望在编写应用程序时保持一致。

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组件以Uppercase开头。

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

这在React官方页面上解释为-

由于JSX是JavaScript，因此不建议将诸如class和for的标识符用作XML属性名称。相反，React DOM组件需要DOM属性名称，例如className和htmlFor。