我正在我的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