Реагируйте на визуализацию строки как HTML в Ant Design

Я использую выпадающий дизайн муравьев У меня есть динамические данные из API, и когда я пытаюсь отобразить эти данные в раскрывающемся меню , они отображаются в виде строки.

Так что я использовал эту библиотеку response-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>
)}

ВЫХОД:

введите описание изображения здесь

Всего 1 ответ


Поскольку вы используете React, вы должны правильно отформатировать элемент DOM. Итак, попробуйте это,

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

Надеюсь, поможет. Удачного кодирования !


Есть идеи?

10000