Как отрендерить ввод HTML-кода?
Я создаю приложение Reactjs, которое вводит данные в текстовой области. Я хочу, чтобы он отображал код, если есть какая-либо разметка html, и отображал в другом блоке div и выделял текст жирным или курсивом, как это делается здесь в текстовом редакторе stackoverflow нравиться или мкд .. Вот мой код:
class App extends React.Component{
constructor(props){
super(props);
this.state = {markdown:''};
this.handleChangeEvent=this.handleChangeEvent.bind(this);
}
handleChangeEvent(event){
this.setState({markdown:event.target.value});
}
render(){
return(<div className = "main">
<textarea onChange = {this.handleChangeEvent} type = "text"/>
<div className = "textShow">{this.state.markdown}</div>
</div>
)
}
}
Какие улучшения я должен внести в него, чтобы отобразить разметку html и добавить другие упомянутые мною функции?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете использовать опасноSetInnerHTML, как в этом совете: https://zhenyong.github.io/react/tips/dangerously-set-inner-html.html
class Application extends React.Component {
constructor(props){
super(props);
this.state = {markdown:''};
this.handleChangeEvent=this.handleChangeEvent.bind(this);
}
handleChangeEvent(event){
this.setState({markdown:event.target.value});
}
render(){
return(<div className = "main">
<textarea onChange = {this.handleChangeEvent} type = "text"/>
<div className = "textShow"
dangerouslySetInnerHTML = {{__html: this.state.markdown}} />
</div>
)
}
}
добавить <b> Мой текст </b> в текстовую область
Этот инструмент делает то, что вам нужно, его можно использовать для отображения текстового редактора или рендеринга текста из разметки или HTML.
Вставляйте необработанный HTML-код, используя опасныйSetInnerHTML только в крайнем случае.
Согласно документации, «Это в основном для взаимодействия с библиотеками для работы со строками DOM». Когда вы его используете, вы отказываетесь от управления DOM React.
Я бы использовал модуль npm html-to-react: https://www.npmjs.com/package/html-to-react
Вы хотите визуализировать уценку или визуализировать код, который вы пишете в блоке подсветки синтаксиса? или и то, и другое, например, когда вы пишете в текстовой области: `` ** my Code is: **
console.info('hello');'', он будет отображаться жирным шрифтом с выделенным синтаксисом console.info для этого используйте пакетmarkedсhilight.js