Question

所以我正在尝试学习React.js，我从阅读Tutorials Point开始。我根据他们的指示创建了示例React应用程序，它很好。

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

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

它甚至不会将其作为字符串或对象返回（如果我在这里错了，请纠正我。）

如果有人能解释清楚，我会非常感激。

Answer 1

HTML查找语法实际上不是HTML，并非所有HTML属性都可以在其中工作。它是JSX，JSX是一个预处理器步骤，它为JavaScript添加了XML语法。例如，如果您尝试将类用作.JSX文件中的属性，则它实际上不会应用您的CSS类：

＆＃13;

    PRODUCTS       DATE                 DESCRIPTION Blue HighHardness  \
0  Product A  2016-9-12  [Steel, Red, HighHardness]                 X   
1  Product B  2016-9-11  [Blue, Lightweight, Steel]    X                
2  Product C  2016-9-12                       [Red]                     

  Lightweight Red Steel  
0               X     X  
1           X         X  
2               X

＆＃13;

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

＆＃13;

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

＆＃13;

您不必使用JSX语法来编写React应用程序，但它使其更具可读性。您可以阅读更多相关信息here。 ReactJS将获取此语法并将其呈现为HTML元素。此处还有一些gotchas使其与HTML不同。

React.component返回方法令人困惑

1 个答案: