背景
React+typescript 開發(fā)，場景為 將后端返回的字符串解析成DOM，渲染在ToolTip 組件中。代碼類似為：
<ToolTip
value = { () => {
const div = document.createElement('div');
div.innerHTML = text;
return div;
}}>
hover tip
</ToolTip>
ToolTip 組件的 value值類型為string | React node 。
問題
然后這樣寫就報錯了：
image.png
表示我如果要渲染一個children的集合，要使用數(shù)組。 ？？？ 我也沒渲染數(shù)組啊，只不過是個對象啊....
原因
React 的children 的值 只能是 其他的組件或者 html 元素。
像這樣：
// ok
<SomeComponent>
<AnotherComponent />
<p>Hello, World</p>
</SomeComponent>
// no
<SomeComponent>
{ property1: 'someText', property2: 69 }
</SomeComponent>
當 需要渲染一個對象時， 可以直接使用map 方法。 比如：
<SomeComponent>
const someObject = { property1: 'someText', property2: 69 };
someObject.map(function(item, i) => <li key={i}>{item}</li>)
</SomeComponent>
解決方法來自：一個神奇的網(wǎng)站
其他小知識
將string轉(zhuǎn)為 DOM的方法:
- innerHTML
- <div dangerouslySetInnerHTML={{ __html: record.remark || '' }} />
- 盤點HTML字符串轉(zhuǎn)DOM的各種方法及細節(jié)
hi 點個贊再走~
