在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ react使用ajax請(qǐng)求返回一個(gè)html片段

react使用ajax請(qǐng)求返回一個(gè)html片段

問(wèn)題：
使用react用ajax請(qǐng)求本地的一個(gè)index.html文件，index.html中只有幾個(gè)html片段，最后返回得到的結(jié)果是dom元素可以正常顯示，但是片段中script標(biāo)簽下的腳本沒(méi)起作用，求大神解答

代碼如下：

1、react頁(yè)面

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <div id="content"></div>
        <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
        <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>        
        <script src="http://static.runoob.com/assets/react/browser.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script type="text/babel">
 

    class UserGist extends React.Component {

     constructor() {
    super();
    this.state = {
      html: ''
    };    
  }
 
  componentDidMount() {
      
      let _this = this;
      this.serverRequest=$.ajax({
          type:"get",
          dataType:'html',
          url:this.props.source,
          async:true,
          success:function(result){
              var lastGist = result;
              _this.setState({
        html: lastGist
        
      });
          }
      });
        
  }
 
  componentWillUnmount() {
    this.serverRequest.abort();
  }
 
  render() {
    return (
      <div  dangerouslySetInnerHTML={{__html: this.state.html}}></div>
    );
  }
}
 
ReactDOM.render(
  <UserGist source="index.html" />,
 document.querySelector("#content")
);
        </script> 
    </body>
</html>

2、請(qǐng)求的index.html頁(yè)面

<a id="firstaitem" href="#">Number1</a>
<a href="#" style="color: red;">Number2</a>
<a href="#">Number3</a>

<script type="text/javascript">
    document.getElementById('firstaitem').style.color='green'
</script>

運(yùn)行結(jié)果如下：
使用react中ajax請(qǐng)求index.html返回的頁(yè)面:

clipboard.png

直接運(yùn)行index.html的頁(yè)面：

clipboard.png

相當(dāng)于使用ajax請(qǐng)求的得到的結(jié)果里script下面的這部分代碼沒(méi)執(zhí)行，求解決。。。

<script type="text/javascript">
    document.getElementById('firstaitem').style.color='green'
</script>
回答
編輯回答
蟲(chóng)児飛

原因是html加載script的時(shí)機(jī)問(wèn)題，所以你需要重新執(zhí)行script腳本。
可參考：eval的使用。

2018年6月21日 16:03