如何渲染<template />標籤有反應？

Question

有時您可能需要從您的反應應用程序呈現Web組件。

Web組件通常使用特殊的<template> ... </template>標籤。 但是，如果我嘗試呈現這樣的標記，像這樣的反應：

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

然後我的網絡組件無法正常工作。

Answer 1

原因是JSX做的工作不同於<template />標籤。模板標籤的想法是無法呈現其子和幾乎處理它像未解析文本（瀏覽器實際解析它只是爲了確保其有效的HTML，但並沒有更多）

但是，當你寫這在JSX：

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

你基本上指示作出反應創建'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 />的內容作爲一個字符串。你可以使用innterHTML。

---

解決方案

一個解決辦法是：

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

現在你問反應以產生所有這些兒童的標籤，節點元素，但讓瀏覽器決定與他們做什麼。

的效果好

你可能不希望使用dangerouslySetInnerHTML所有的時間。因此，讓我們創建一個幫助組件：

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

現在，您需要使用模板任何時候都可以使用它像這樣：

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

不要忘了加上引號內的內容，因爲，它應該是一個字符串。