Question

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

UIColor.blue

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

Answer 1

您可以像本提示中那样使用危险的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.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>
             )
      }
}

Answer 2

此工具可以满足您的需求，可用于显示文本编辑器或通过markdown或html呈现文本

https://draftjs.org/

Answer 3

仅在紧急情况下才使用危险地设置InnerHTML插入原始HTML。

根据文档"This is mainly for cooperating with DOM string manipulation libraries"。使用它时，您将放弃React的DOM管理的好处。

我将使用npm模块html-to-react：https://www.npmjs.com/package/html-to-react

如何呈现html代码输入？

3 个答案: