Добавить атрибут className к опасному содержимому SetInnerHTML - PullRequest
Новая
       14

Добавить атрибут className к опасному содержимому SetInnerHTML

0 голосов
/ 08 апреля 2019

Как указать атрибут className для div, который содержит «hello world»: 

<div dangerouslySetInnerHTML={{__html: '<div>hello world</div>'}} />


Один из способов - установить внешний div следующим образом: 

<div dangerouslySetInnerHTML={{__html: '<div>hello world</div>'}} className='class-name'/>

и затем в стиле css ребенок: 

.class-name div {
  (css stuff here)
}

Но я хочу установить className непосредственно в div с помощью 'hello world'


РЕДАКТИРОВАТЬ: Добавление имени класса для введенного HTML не решает проблему, например: 

let content = '<div class="class-name">hello world</div>'
<div dangerouslySetInnerHTML={{__html: content}}

не работает, потому что если один и тот же контент используется много раз, то возникают коллизии css (я использую style-loader с включенными модулями CSS)

1 Ответ

1 голос
/ 08 апреля 2019

Прежде чем продолжить чтение: Спросите себя, зачем вам нужно dangerouslySetInnerHTML! Это не предназначено для использования, и если так, используйте дезинфицирующее средство. 

/* React with HTML context */
<div dangerouslySetInnerHTML={{__html: '<div class="class-name">hello world</div>'}} />

Вы можете упростить это, однако, безопасным способом: 

/* React context only */
<div className="class-name">hello world</div>
...