react 写html

在React中，我们一般使用JSX语法来编写HTML标记，然后通过React的组件机制来组装和渲染这些标记。下面是一个简单的例子：

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello World!</h1>
      <p>This is a paragraph.</p>
    </div>
  );
}

export default App;

在上面的例子中，我们定义了一个名为App的组件，它返回一个包含两个HTML标记的div元素。其中，h1和p标记使用了JSX语法来定义，而div元素则是普通的HTML标记。最后，我们通过export语句将组件暴露出去，以便其他组件可以引用和使用它。

相关问题

react 渲染html

在 React 中渲染 HTML 可以利用 JSX 语法，将 HTML 标签编写成 React 组件的形式，例如：

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello World!</h1>
      <p>This is a paragraph.</p>
    </div>
  );
}

export default App;

在上面的例子中，我们使用 `<div>`、`<h1>` 和 `<p>` 标签作为 React 组件，然后将它们渲染到页面上。

当然，如果需要将 HTML 字符串渲染成 React 组件，可以使用 `dangerouslySetInnerHTML` 属性，例如：

import React from 'react';

function App() {
  const htmlString = '<h1>Hello World!</h1><p>This is a paragraph.</p>';

  return (
    <div dangerouslySetInnerHTML={{ __html: htmlString }} />
  );
}

export default App;

需要注意的是，由于使用 `dangerouslySetInnerHTML` 可能存在 XSS 攻击的风险，因此需要确保渲染的 HTML 字符串是可信的。

react html模板

React的HTML模板是使用JSX（JavaScript XML）语法编写的。JSX允许我们在JavaScript代码中编写类似HTML的结构。

以下是一个简单的React组件的示例，展示了如何使用React的HTML模板：

import React from 'react';

function MyComponent() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is a React component.</p>
    </div>
  );
}

export default MyComponent;

在上面的示例中，我们创建了一个名为`MyComponent`的函数组件。在函数组件中，我们使用了JSX语法来定义组件的结构。`<div>`标签是一个React元素，它包含了一个`<h1>`标题和一个`<p>`段落。这些标签看起来像HTML标签，但实际上它们是React组件。

在实际项目中，我们可以将这个组件导入到其他文件中，并在需要的地方使用它。

请注意，为了在浏览器中正常运行React代码，你需要使用Babel等工具来将JSX编译为普通的JavaScript代码。