javascript - 将 html 字符串和对象的映射数组反应到一个 DOM 元素

Question

我试图找出将 HTML 字符串和对象的数组呈现到单个 DOM 元素的最佳解决方案，其中对象被映射到可交互的 React 节点。

数组如下所示：

[
  'Some text<br/><table><tbody><tr><td>Select a date</td><td>',
  {id: 1, type: 'datefield'},
  '</td></tr></table>'
]

第二个元素是要映射到允许交互的字段。

我发现的唯一方法是将它们包装在一个跨度内，但是表格没有正确呈现：

elements.map((el: any, index: number)) => {
  if (typeof el === 'string') {
    return (
      <span dangerouslySetInnerHTML={{ __html: el }} />
    );
  }

  switch(el.type) {
    case 'datefield':
      return <DateField id={el.id} onclick={somehandle}/>
      break;
    default:
      return '';
      break;
  }
}

抱歉，如果我使用了错误的术语，但我对 React 游戏还很陌生。

标签： javascripthtmlreactjstypescript