javascript - 如何在React中显示Draft.js格式化的数据？

Question

我的 React 应用程序中有一个评论框，我使用 Draft.js 构建了它，如下所示。我输入一些文本并使用粗体和斜体按钮设置它们的格式。然后我点击评论按钮。单击 Comment 按钮后，将触发 sendUserComment 函数并更新状态“newComment”。 AXIOS 会将它们发送到数据库并返回评论，以便我可以在“newCommentShow”div 中显示评论。

问题是，如果我以文本形式输入评论并应用粗体，数据将发送到数据库 <p><b>Some texts</b></p>

返回的数据也是同样的处理方式。 所以我看到了整个<p><b>Some texts</b></p>作为“newCommentShow”div 中的字符串。如何处理该字符串中的标签并显示正确格式的文本？

const { Toolbar } = toolbarPlugin;
const plugins = [toolbarPlugin];
const text = '';

class ProjectModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            newComment: '',
            editorState: createEditorStateWithText(text)
        };
        this.editorOnChange = this.editorOnChange.bind(this);
    }

    editorOnChange(editorState) {
        this.setState({ editorState });
    }

    sendUserComment = () => {
        const com = stateToHTML(this.state.editorState.getCurrentContent())
         API.post('add_comment', com)
             .then(({ data }) => {
                 console.log(data);
                 this.setState({ newComment: data.comment })
             })
             .catch((err) => {
                 console.log("AXIOS ERROR: ", err);
             })
    }

    render() {
      return(
         <div className="newCommentBox">                            
            <div className="newCommentMain">
              <Toolbar>
                {
                 (externalProps) => (
                   <div className="toolbarModal">
                      <BoldButton {...externalProps} />                                                                                                
                      <ItalicButton {...externalProps} />                                                                                           
                   </div>                                                                                        
                 )                                                                                    
                }                                                                                
              </Toolbar>                                                                                
              <Editor                                                                                    
                editorState={this.state.editorState}                                                                                    
                onChange={this.editorOnChange}                                                                                    
                plugins={plugins}                                                                                    
                ref={(element) => { this.editor = element; }}                                                                                    
                className="editor"                                                                                
              />                                                                            
            </div>                                                                               
            <button className="commentBtn" onClick={() => this.sendUserComment}>Comment</button>   

            <div className="newCommentShow">{this.state.newComment}</div>                                                                         
         </div>         
      )
    }
}

Answer 1

要将 HTML 直接注入(inject)到 React 组件中可以使用 dangerouslySetInnerHTML

<div className="newComment" dangerouslySetInnerHTML={{ __html: this.state.newComment }} />

注意 - 根据文档，请谨慎使用此功能，并确保不会让自己容易受到 XSS 的攻击。攻击。