Реагируйте на строку рендеринга как HTML в Ant Design - PullRequest
Новая
       12

Реагируйте на строку рендеринга как HTML в Ant Design

3 голосов
/ 23 марта 2020

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

Поэтому я использовал реагировать 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>
)}

ВЫХОД:

enter image description here

1 Ответ

0 голосов
/ 23 марта 2020

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

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

Надеюсь, это поможет. Счастливое кодирование !!

...