React动态标签名称

在React中，可以使用动态标签名称来创建动态渲染的组件。以下是一种常见的实现方式：

import React from "react";

const DynamicComponent = ({ tag }) => {
  const Tag = tag; // 将传入的标签名称赋值给一个变量
  return <Tag>Hello, World!</Tag>; // 使用标签变量来渲染组件
};

const App = () => {
  const tagName = "h1"; // 将要渲染的标签名称赋值给一个变量
  return <DynamicComponent tag={tagName} />; // 将标签名称作为 props 传递给动态组件
};

export default App;

在上面的例子中，我们创建了一个名为DynamicComponent的函数组件。它接收一个tag属性，该属性的值是一个标签名称。在组件内部，我们将tag属性的值赋值给一个常量Tag，然后在返回的JSX中使用该常量来渲染相应的标签。

在App组件中，我们定义了一个tagName变量，并将其赋值为"h1"。然后，我们将tagName作为tag属性传递给DynamicComponent组件。这样，DynamicComponent组件就可以根据传入的标签名称动态渲染相应的组件。

你也可以根据需要使用其他标签名称，例如"div"、"p"等。只需要将相应的标签名称赋值给tagName变量即可。