在 ant design 中将渲染字符串反应为 HTML

Question

我正在使用 ant design 下拉菜单。我有来自 API 的动态数据，当我尝试将这些数据渲染到 dropdown menu 时，它以字符串形式呈现。

所以我使用这个 react-html-parser 库将字符串呈现为 HTML 但它不起作用。

renderSocialMedia = () => {
if (this.props.weblookup) {
  let socialmedialookup = this.props.weblookup
  webitems = ""
  return socialmedialookup.map((k, index) => {
    if (k.name.toLowerCase() != "other")
      return webitems = "<Menu.Item key=" + k.id + ">" + k.name + "</Menu.Item>"
  })
 }
}

{ReactHtmlParser(webitems)}

<FormItem>
 {getFieldDecorator('AddNetwork', {
  initialValue: "",
 })(
 <Dropdown overlay={
  <Menu onClick='{this.handleMenuClick}'>
    <div>{ReactHtmlParser(webitems)}</div>
  </Menu>
} trigger={['click']}>
 <a className="ant-dropdown-link" href="#">
  Add Username 
  <Icon type="down" />
 </a>
</Dropdown>
)}

输出：

Answer 1

当您使用 React 时，您必须正确格式化 DOM 元素。所以，试试这个，

return webitems = <Menu.Item key={ k.id }>{ k.name}</Menu.Item>

希望对您有所帮助。 编码愉快!!

在 ant design 中将渲染字符串反应为 HTML

React render string as HTML in ant design

javascript

render

reactjs