创建没有 JSX 的 React - JavaScript

在创建React应用程序时，许多开发人员喜欢使用JSX，这是一种使我们可以使用类似HTML的语法来创建React组件的语言扩展。但是，有时您可能想要避免在代码中包含JSX，特别是在您的应用程序已经具有其他标记的情况下。

以下是一些方法，您可以在不使用JSX的情况下创建React组件。

使用React.createElement

React.createElement是使用不带JSX的React的一种方式。它允许您在JavaScript中编写类似HTML结构的代码，但使用纯JavaScript语法。

以下是使用React.createElement创建简单的Hello World组件的示例代码：

const HelloWorld = () => React.createElement('h1', null, 'Hello World!');

在上面的代码中，我们创建了一个名为HelloWorld的函数组件，它返回了一个React元素，其类型为'h1'，没有任何属性，和一个子元素'Hello World!'。

在您的组件中使用React.createElement时，您需要将其导入到您的代码中：

import React from 'react';

const HelloWorld = () => React.createElement('h1', null, 'Hello World!');

使用React.DOM

React.DOM允许您使用更简单的语法来创建React元素，而无需使用JSX。它是一个包含React元素的工厂对象。

以下是使用React.DOM创建上面的Hello World组件的示例代码：

import React from 'react';

const HelloWorld = () => React.DOM.h1(null, 'Hello World!');

在上面的代码中，我们创建了一个名为HelloWorld的函数组件，它返回了一个React元素，其类型为'h1'，没有任何属性，和一个子元素'Hello World!'。

使用模板字符串

您还可以使用模板字符串来创建React组件。以下是使用模板字符串创建Hello World组件的示例代码：

import React from 'react';

const HelloWorld = () => (
  <div>
    <h1>Hello World!</h1>
  </div>
);

在上面的代码中，我们使用模板字符串定义了一个名为HelloWorld的函数组件，并返回了一个包含'h1'元素的'div'元素。

虽然上面的代码中仍然包含了JSX，但您可以使用这种方法避免编写较多的JSX代码。

结论

以上是使用不带JSX的React的三种方法。尽管使用JSX可以使代码更易读，但如果您的应用程序已经使用其他标记，则这些方法可能更适合您。

无论您选择哪种方法，每种方法都允许使用JavaScript编写React组件。在选择方法时，请考虑使用哪种方法更方便您的开发流程。