如何呈現變量（或道具）內的jsx/html？

Question

const Footer =() => { 
    let a="<b>Hey</b>" 
    return (
    <div> 
     Some bold text: {a} 
    </div> 
) 
} 

這隻會呈現爲Some bold text: <b>Hey</b>。如何將粗體文本呈現爲粗體？可變的內容是我自己的，所以我不必擔心eval的東西。

Answer 1

你將不得不使用dangerouslySetInnerHTML

const Footer =() => { 
    let a= { __html: "<b>Hey</b>" }; 
    return (
    <div> 
     Some bold text: <span dangerouslySetInnerHTML={a} /> 
    </div> 
) 
}