React.component return 方法令人困惑

Question

所以我正在尝试学习 React.js，并且我从 Tutorials Point 开始阅读。我按照他们的说明创建了示例 React 应用程序，结果非常好。

我的问题是，我在 App.jsx 文件中看到 React.component() 方法声明 here。他们在 return 方法中 returned 了实际的 HTML 代码。我以前从未见过这种 return 声明。

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}

它甚至 return 它不是字符串或对象（如果我在这里错了请纠正我）。

如果有人能解释一下，我将不胜感激。

Answer 1

HTML 看起来的语法实际上并不是 HTML 并且并非所有 HTML 属性都适用于它。它是 JSX，JSX 是一个预处理器步骤，将 XML 语法添加到 JavaScript。例如，如果您尝试在 .JSX 文件中使用 class 作为属性，它实际上不会应用您的 CSS class :

class App extends React.Component {
   render() {
      return (
         <div class="cssClass">
            Hello World!!!
         </div>
      );
   }
}

你必须这样做。注意 class 现在是 className

class App extends React.Component {
   render() {
      return (
         <div className="cssClass">
            Hello World!!!
         </div>
      );
   }
}

您不必使用 JSX 语法来编写 React 应用程序，但它使它更具可读性。您可以阅读更多关于它 here. ReactJS will grab this syntax and render it into HTML elements. Also here are some gotchas 的信息，这使得它不同于 HTML.

React.component return 方法令人困惑

React.component return method is confusing

components

reactjs

react-jsx