时间戳

首页 > 解决方案 > 如何在不转义每个字符的情况下呈现充满特殊字符的页面

reactjs - 如何在不转义每个字符的情况下呈现充满特殊字符的页面

问题描述

我正在学习反应，我正在尝试创建一个练习应用程序，我可以在其中放置我的笔记，以便在更换计算机时能够轻松访问它们。

我有一个很长的备忘单，里面装满了我想在页面中显示的代码，但是我无法逃避每一个特殊的字符和关键字，因为基本上它已经写满了。

希望这是有道理的，如果需要任何澄清，请告诉我。任何关于如何解决这个问题的建议都会非常感激。谢谢！

标签： reactjsescapingspecial-characters

解决方案

您可以为此使用一个名为显着的库。

这是一个取自React 官方文档的简单示例。

class MarkdownEditor extends React.Component {
  constructor(props) {
    super(props);
    this.md = new Remarkable();
    this.handleChange = this.handleChange.bind(this);
    this.state = { value: 'Hello, **world**!' };
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  getRawMarkup() {
    return { __html: this.md.render(this.state.value) };
  }

  render() {
    return (
      <div className="MarkdownEditor">
        <h3>Input</h3>
        <label htmlFor="markdown-content">
          Enter some markdown
        </label>
        <textarea
          id="markdown-content"
          onChange={this.handleChange}
          defaultValue={this.state.value}
        />
        <h3>Output</h3>
        <div
          className="content"
          dangerouslySetInnerHTML={this.getRawMarkup()}
        />
      </div>
    );
  }
}

推荐阅读