javascript - 通过 props 用 React.js 交换 HTML 元素

Question

上下文：React 新手。想要构建一个多功能的<Wrapper />组件。

我的问题是：“如何根据道具的值更改呈现的 HTML 元素？”

我的组件如下所示：

const Wrapper = ({ elem = 'div', name, children }) => {
  const statement = `<${elem} className='oc-${name}-wrapper'>{children}</${elem}>`;
  return statement;
};

这个准解决方案只是渲染出字符串。我该如何编写上述内容，以便可以使用具有可互换元素的组件，如以下两个示例，以便分别实现 和<main>？<div>当前变量已成功注入，但代码呈现为字符串，而不是执行。

// usage
<Wrapper elem="main" name="splash"><p>foo</p></Wrapper>
// output
<main class="oc-splash-wrapper"><p>foo</p></main>

// usage
<Wrapper name="content"><p>bar</p></Wrapper>
// output
<div class="oc-content-wrapper"><p>bar</p></div>

先感谢您！

标签： javascriptreactjs

Answer 1

HTML asString将无法正确呈现。
尝试更改Wrapper功能：

const Wrapper = ({ elem = 'div', name, children }) => {
  const statement = `<${elem} className='oc-${name}-wrapper'>{children}</${elem}>`;
  return <div dangerouslySetInnerHTML={{ __html: statement  }} />;
};