HTML中的反應，ES6模板文字

我傳遞一些文本組件：HTML中的反應，ES6模板文字

<Component 
text={`text with <span style={{fontWeight:bold}}>${thisPart}</span> emphasized`} 
/>

雖然它肯定不能工作，但我想這說明我的意圖很好。任何想法如何使其工作？

來源

2016-11-07 Stanley Luo

您不能將字符串化的HTML傳遞給組件，因爲它會打開XSS漏洞。

如果必須呈現HTML，那麼你需要使用dangerouslySetInnerHTML

source:

dangerouslySetInnerHTML是陣營的替代瀏覽器的DOM使用的innerHTML。一般來說，從代碼中設置HTML是有風險的，因爲很容易讓您的用戶無意中發現跨站腳本攻擊（XSS）。因此，您可以直接從React中設置HTML，但您必須輸入dangerouslySetInnerHTML並傳遞帶有__html鍵的對象，以提醒您自己危險。例如：

function createMarkup() { 
    return {__html: 'First &middot; Second'}; 
} 

function MyComponent() { 
    return <div dangerouslySetInnerHTML={createMarkup()} />; 
}

來源

2016-11-07 03:19:57

啊！我知道了，謝謝您的快速答覆。似乎我應該避免使用這個，任何想法如何簡單地使我的文字的一部分大膽？ –

如果文本不是來自用戶輸入，例如，如果它是硬編碼的，可以使用危險設置很好SetStoreHTML –

@StanleyLuo這裏有一個反應組件，可以爲你做到這一點https://github.com/bvaughn/react-highlight-words ＃用法 –

不要使用dangerouslySetInnerHTML這一點。這是一種反模式。

<MyComponent> 
<span>text with</span> 
<strong>{thisPart}</strong> 
<span>emphasized</span> 
</MyComponent>

的2個span和1 strong元素訪問通過MyComponent的children財產

class MyComponent extends React.Component { 
    render() { 
    return (
     <div> 
     <p>some text</p> 
     <p>{this.props.children}</p> 
     </div> 
    ) 
    } 
}

會使

<div> 
    <p>some text</p> 
    <p> 
    <span>text with</span> 
    <strong>this part</strong> 
    <span>emphasized</span> 
    </p> 
</div>

來源

2016-11-07 04:28:14 naomik

HTML中的反應，ES6模板文字

回答

相關問題