在输出中反应原始html显示

时间:2016-11-26 11:22:56

标签: reactjs

我正在研究降价预览器,它将帮助我学习REact)。 我使用“标记”库(一个功能齐全的markdown解析器和编译器,用JavaScript编写)。我在textarea中输入文本后 - 在div id =“outputText”中显示原始HTML。我该怎么做才能使浏览器显示为html。 这是代码:

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      _text: ""
    };
  }

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

  componentDidMount

  render() {
    return ( < div className = "headDiv" >
      < textarea onChange = {
        this.handleChange.bind(this)
      }
      id = "inputText"
      rows = "25"
      cols = "100" / >
      < div id = "outputText" > {
        this.state._text
      } < /div>
            </div >
    );
  }
}

ReactDOM.render( < Input / > , document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

0 个答案:

没有答案