jQuery脚本无法在reactJs应用程序呈现的html页面内工作

时间:2019-04-28 19:01:32

标签: jquery reactjs

我正在我的reactJs应用程序中呈现一个html页面,但是当打开页面时仅显示html元素并且jquery脚本不起作用,并且当我在浏览器中打开html页面时显示了jquery元素。谢谢您的帮助 !。这是我的代码:

//反应代码

import React ,{Component} from 'react'
import Page from './test.html';
var htmlDoc = {__html: Page};
class Player extends Component{
  state={
    showHtmlPage:false,

  }
  componentDidMount(){
      this.setState({showHtmlPage:true})
  }
    render(){
        let htmlPage = null
        if(this.state.showHtmlPage){
            htmlPage = <div dangerouslySetInnerHTML={htmlDoc} />   
        }
    return(
        <div style={{marginTop:20}}>
        {htmlPage}
        </div>
    )
    }
}
export default Player

// html页面

<html>
<head>
<title>jQuery Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
 $("#msgid").html("This is Hello World by JQuery");
});
</script>

This is Hello World by HTML
<div id="msgid">
</div>
</body>
</html>

//在浏览器中的结果: 这是HTML的Hello World 这是JQuery的Hello World

//导致react app: 这是HTML的Hello World

0 个答案:

没有答案