javascript - 如何呈现html代码输入？

Question

我正在创建一个在文本区域获取输入的 Reactjs 应用程序。如果有任何 html 标记，我希望它呈现代码并在另一个 div block 中显示文本，并以粗体或斜体显示文本，就像在 stackoverflow 的文本编辑器中所做的那样 like 或mkd.. 这是我的代码:

class App extends React.Component{
      constructor(props){
              super(props);
              this.state={markdown:''};
              this.handleChange=this.handleChange.bind(this);
      }
      handleChange(event){
             this.setState({markdown:event.target.value});
      }
      render(){
             return(<div className="main">
                    <textarea onChange={this.handleChange} type="text"/>
                    <div className="textShow">{this.state.markdown}</div>
                    </div>
             )
      }
}

我应该对其进行哪些改进以呈现 html 标记并添加我提到的其他功能？

Answer 1

您可以像本技巧中那样使用 dangerouslySetInnerHTML:https://zhenyong.github.io/react/tips/dangerously-set-inner-html.html

class Application extends React.Component {
     constructor(props){
              super(props);
              this.state={markdown:''};
              this.handleChange=this.handleChange.bind(this);
      }
      handleChange(event){
             this.setState({markdown:event.target.value});
      }
      render(){
             return(<div className="main">
                    <textarea onChange={this.handleChange} type="text"/>
                     <div className="textShow" 
                       dangerouslySetInnerHTML={{__html: this.state.markdown}} />

                    </div>
             )
      }
}