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

Question

上下文:React 新手。想打造一个多功能的<Wrapper />组件。

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

我的组件如下所示:

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

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

// 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>

提前致谢!

Answer 1

String 格式的 HTML 将无法正确呈现。
尝试更改 Wrapper 函数:

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