Question

这是我想使用reactDOM呈现的字符串：

<!DOCTYPE html><html><head><title>Websockets 101</title><meta charset="utf-8"><link rel="shortcut icon" href="#"><link rel="stylesheet" href=
"https://fonts.googleapis.com/css?family=Roboto"><link rel="stylesheet" href="../stylesheets/styles.css" type="text/css"><link rel="stylesheet" href
="../stylesheets/projects_showcase.css" type="text/css"><link rel="stylesheet" href="../stylesheets/portfolio/portfolio.css" type="text/css"><!-- Bo
otstrap--><!--link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css")--></head><body id="portfolio"></bo
dy></html><div><h1>This is the story of a bread named brown</h1><p>bread was brown and was also named brown</p><p>thus he was brown</p></div>

我尝试了以下操作：（仅显示render方法）其中this.state.note_html是html文档字符串

        return (
                <div style={{background: 'red', width: '300px', height: '300px'}}>
                    <h1>Hello</h1>
                    <button onClick={this.fetchHTML}>Click me</button>
                    {this.state.note_html}
                </div>

我没工作。它只是将它呈现为字符串。

结果：

Answer 1

这是一个重复的问题： Rendering raw html with reactjs

Answer 2

尝试一下：

return (
   <div style={{background: 'red', width: '300px', height: '300px'}}>
      <h1>Hello</h1>
      <button onClick={this.fetchHTML}>Click me</button>
      <div dangerouslySetInnerHTML={this.createMarkup()} />;
   </div> );
...
createMarkup() {
  return {__html: this.state.note_html};
}

html到html的字符串（反应前端）

2 个答案: