在ReactJs中自动渲染自定义html标签

Question

在基本的 HTML 中，我们几乎可以自由地使用任何我们想要的标签。我可以写这样的代码：

<card>
  <header>
    <logo>
      <img src="..">
    </logo>
  <header>
  <subject>
  ..
  </subject>
  <information>
  ..
  </information>
<card>

我知道这不标准，但它非常有组织！

有什么创造性的方法让 JSX 支持这种语法吗？我不是在谈论手动定义标签或组件。我正在寻找一个根本解决方案，使 React JSX 自动支持所有自定义标签。”

我尝试过：

const tags = ['card', 'header', 'logo', 'subject', 'information'];

const components = tags.reduce((obj, tag) => {
  obj[tag] = ({ children, ...props }) => React.createElement(tag, props, children);
  return obj;
}, {});

但它不起作用，而且不是自动的

Answer 1

您可以创建一个函数，根据自定义标签列表动态生成 React 组件。这是一个例子：

import React from 'react';

const CustomComponent = ({ tag, children, ...props }) => {
  const CustomTag = tag || 'div';
  return React.createElement(CustomTag, props, children);
};

const App = () => {
  const tags = ['card', 'header', 'logo', 'subject', 'information'];

  return (
    <CustomComponent tag="card">
      <CustomComponent tag="header">
        <CustomComponent tag="logo">
          <img src="..." alt="Logo" />
        </CustomComponent>
      </CustomComponent>
      <CustomComponent tag="subject">Subject content</CustomComponent>
      <CustomComponent tag="information">Information content</CustomComponent>
    </CustomComponent>
  );
};

export default App;