Sometimes you might need to render web-components from your react app.
Web-components often use a special <template> ... </template> tag.
But if I try to render such ma
Sometimes you might need to render web-components from your react app.
Web-components often use a special <template> ... </template> tag.
But if I try to render such markup with react like this:
render() {
return (
<template>
<div>some content</div>
</template>
)
}
then my web-components don't work correctly.
NAN error
This works:
document.getElementById("2").innerHTML = new Date().getTime() - startDelay ;
var startDelay; //global scope
startDelay = new Date().getTime(); //this is done inside of a function
this also works
document.getElementById("2").innerHTML = startDelay + " " + startTime ;
var startTime; //global scope
startTime = new Date().getTime(); //this is done in another function
//For some odd reason this does NOT work :/
document.getElementById("2").innerHTML = new Date().getTime() - startDelay + " " + new Date().getTime() - startTime;
Running this in chrome: This gives me a single NAN
document.getElementById("2").innerHTML = 1 + " " + new Date().getTime() - startTime;
This also gives me a NAN error!
原因是 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>
)
}
不要忘记将内部内容放在引号中，因为它应该是一个字符串。
我知道这个问题已经有了答案，但我想还有另一个更简单的解决方案来创建 hoc（高阶组件）。
只需像这样创建新的“组件”：
// hoc/Template.js
const template = props => props.children
export default template
然后你可以通过这种方式在你的项目中使用它：
import './hoc/Template.js'
...
render() {
return (
<Template>
{'<div>some content</div>'}
</Template>
)
}
较新版本的 react 已经构建了这样的组件，因此您可以在不创建组件的情况下实现相同的目标。
import { Fragment } from 'react'
...
render() {
return (
<Fragment>
{'<div>some content</div>'}
</Fragment>
)
}
这实际上是 React 中的一个错误！https://github.com/facebook/react/issues/19932
当本机浏览器解析<template>标签时，它会将所有子元素附加到模板的content片段中，而不是将它们添加为children. 所以模板永远不应该有任何children.
但是，如果您以编程方式构建 DOM（按照方式react-dom），则模板将有一个空 content片段，因为所有子项都作为子项添加。这就是 Web 组件在这些模板中无法正常运行的原因。
这也是问题的一个例子：https ://codesandbox.io/s/new-sun-8l62o?file=/src/App.tsx:1056-1118
最简单的解决方法是使用dangerouslySetInnerHTML，如下所示：
<template dangerouslySetInnerHTML={{ __html: `
<p> Some text </p>
` }} />
这受限于您只能提供原始 HTML（没有自定义 React 元素）这一事实。但是，由于您<template>首先使用的是标签，因此您似乎不太可能在模板中也使用 React。