reactjs - 如何使用 React 渲染 <template/> 标签？

Question

有时您可能需要从 React 应用程序渲染 Web 组件。

Web 组件通常使用特殊的 <template> ... </template>标签。 但是如果我尝试像这样使用 React 来渲染这样的标记:

render() {
  return (
    <template>
      <div>some content</div>
    </template>
  )
}

然后我的网络组件无法正常工作。

Answer 1

原因是 JSX 的工作与 <template /> 的工作不同。标签存在于。模板标签的想法是不渲染其子元素，并且几乎像未解析的文本一样处理它(浏览器实际上解析它只是为了确保其有效的 html，但仅此而已)

但是当你在 JSX 中写这个时:

return (
  <template>
    <div>some content</div>
  </template>
)

你基本上是在指示react创建一个'template'元素，然后创建一个 'div'元素，然后附加此 div到template小时候。

所以在幕后发生了这种情况:

const template = document.createElement('template')
const div = document.createElement('div')
const text = document.createTextNode('some text')
div.appendChild(text)
template.appendChild(div)

但是你想要的是设置 <template /> 的内容作为字符串。您可以使用innerHTML为此。

<小时/>

解决方案

一种解决方案是:

render() {
  return (
    <template
      dangerouslySetInnerHTML={{
        __html: '<div>some content</div>'
      }}
    />
  )
}

现在，您要求 React 将所有这些子标签创建为节点元素，但让浏览器决定如何处理它们。

更好的解决方案

您可能不想使用dangerouslySetInnerHTML每时每刻。因此，让我们创建一个辅助组件:

function Template({ children, ...attrs }) {
  return (
    <template
      {...attrs}
      dangerouslySetInnerHTML={{ __html: children }}
    />
  );
}

现在，任何时候您需要使用模板时，都可以像这样使用它:

render() {
  return (
    <Template>
      {'<div>some content</div>'}
    </Template>
  )
}

不要忘记将内部内容放在引号中，因为它应该是一个字符串。