Objects are not valid as a React

背景

React+typescript 开发，场景为 将后端返回的字符串解析成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的集合，要使用数组。 ？？？ 我也没渲染数组啊，只不过是个对象啊....

原因

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>

解决方法来自：一个神奇的网站

其他小知识

将string转为 DOM的方法:

• innerHTML
• <div dangerouslySetInnerHTML={{ __html: record.remark || '' }} />
• 盘点HTML字符串转DOM的各种方法及细节

hi 点个赞再走~