如何使用 DOMpurify？

Question

我也尝试使用 React Stack Snippet，但这不起作用。这是我第一次所以我肯定需要帮助

class App extends Component {
  state = {
    text: sampleText,
  };

  handleChange = (e) => {
    const text = e.target.value;
    this.setState({ text: text });
  };

  renderText = (text) => marked(text, { sanitize: true });

  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-sm-6">
            <textarea
              onChange={this.handleChange}
              value={this.state.text}
              className="form-control"
              rows="35"
            ></textarea>
          </div>
          <div className="col-sm-6">
            <div
              dangerouslySetInnerHTML={{
                __html: this.renderText(this.state.text),
              }}
            ></div>
          </div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
    <App />,
    document.body
);

<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我实现了编辑降价。 我想用 DOMPurify 替换“消毒”。我怎样才能做到这一点 ？ 我展示了这个页面： 在此输入链接描述 但我不知道如何调整我的代码。 我希望它足够清楚

import './App.css';
import { sampleText } from './sampleText';
import { marked } from 'marked';

import React, { Component } from 'react';

class App extends Component {
  state = {
    text: sampleText,
  };

  handleChange = (e) => {
    const text = e.target.value;
    this.setState({ text: text });
  };

  renderText = (text) => marked(text, { sanitize: true });

  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-sm-6">
            <textarea
              onChange={this.handleChange}
              value={this.state.text}
              className="form-control"
              rows="35"
            ></textarea>
          </div>
          <div className="col-sm-6">
            <div
              dangerouslySetInnerHTML={{
                __html: this.renderText(this.state.text),
              }}
            ></div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

Answer 1

更换

dangerouslySetInnerHTML={{
                __html: this.renderText(this.state.text),
}}

与 `// 从“dompurify”导入purify;

<div dangerouslySetInnerHTML={{ __html:purify.sanitize(this.state.text, { sanitize: true }) }} />`