如何解决在React Portal中执行Jquery
我正在开发使用React Portal的React应用程序。我已经能够使用给定的数据在新窗口中加载门户(门户代表表中的数据。)。现在,我想在Portal中的该表上添加Jquery DataTable库,但是我无法这样做。我以为我的Jquery库和DataTable启动函数在门户中不起作用。
注意:我试图添加一个简单的onClick,但是我无法运行它。
请参阅以下代码段供您参考。
在父组件中向门户网站加载“ Restaurants”组件
<RankingWindowPortal>
<Restaurants
restaurants={this.props.restaurants}
selected={this.state.selected}
formValues={this.state.formTags}
/>
</RankingWindowPortal>
RankingWindowPortal组件
class RankingWindowPortal extends React.PureComponent {
constructor(props) {
super(props);
// STEP 1: create a container <div>
this.containerEl = document.createElement('div');
this.externalWindow = null;
}
copyStyles(sourceDoc,targetDoc) {
Array.from(sourceDoc.styleSheets).forEach(styleSheet => {
if (styleSheet.cssRules) { // for <style> elements
const newStyleEl = sourceDoc.createElement('style');
Array.from(styleSheet.cssRules).forEach(cssRule => {
// write the text of each rule into the body of the style element
newStyleEl.appendChild(sourceDoc.createTextNode(cssRule.csstext));
});
targetDoc.head.appendChild(newStyleEl);
} else if (styleSheet.href) { // for <link> elements loading CSS from a URL
const newLinkEl = sourceDoc.createElement('link');
newLinkEl.rel = 'stylesheet';
newLinkEl.href = styleSheet.href;
targetDoc.head.appendChild(newLinkEl);
}
});
}
render() {
// STEP 2: append props.children to the container <div> that isn't mounted anywhere yet
return ReactDOM.createPortal(this.props.children,this.containerEl);
}
componentDidMount() {
// STEP 3: open a new browser window and store a reference to it
// this.externalWindow = window.open('','','width=1920,height=1080');
this.externalWindow = window.open('','width=1700,height=900,left=300,bottom=300');
this.copyStyles(document,this.externalWindow.document);
// STEP 4: append the container <div> (that has props.children appended to it) to the body of the new window
this.externalWindow.document.body.appendChild(this.containerEl);
}
componentwillUnmount() {
// STEP 5: This will fire when this.state.showWindowPortal in the parent component becomes false
// So we tidy up by closing the window
this.externalWindow.close();
}
}
export default RankingWindowPortal
餐厅组件
import React,{ Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "../styles/restaurants.css"
import logo from "../resources/summit.png"
import RankingFooter from "./rankingfooter";
import $ from 'jquery/dist/jquery';
import "datatables.net-dt/js/dataTables.dataTables"
import "datatables.net-dt/css/jquery.dataTables.min.css"
$( function() {
$( "#sort-table" ).DataTable();
} );
export default class Restaurants extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="row">
<div className="rankingPageHeader">
<div className="headerlogo">
<img src={logo} width="218" height="43" alt=""/>
</div>
<div className="headerTitle">
</div>
</div>
<div className="col-12 mx-auto">
<div className="card">
<div className="card-body">
<table className="table table-bordered sort-table table-condensed" id="sort-table">
<thead className="bg-success">
<tr>
{this.props.formValues.map((formItem,index) => {
return formItem.tag === 'glrank' && formItem.value?
<th className="text-center tableHeaderStyle">Rank</th> :
formItem.tag === 'name' && formItem.value?
<th className="text-center tableHeaderStyle">Restaurant</th> :
formItem.tag === 'slice' && formItem.value?
<th className="text-center tableHeaderStyle">Goal</th>:
formItem.tag == 'hourDaily' && formItem.value?
<th className="text-center tableHeaderStyle">Hour IP</th>:
formItem.tag == 'hourAv' && formItem.value?
<th className="text-center tableHeaderStyle">Hour Avrg</th> :
formItem.tag == 'hourAch' && formItem.value?
<th className="text-center tableHeaderStyle">Hour %</th> :
formItem.tag == 'hourCss' && formItem.value?
<th className="text-center tableHeaderStyle">Cars Hour - Today</th>:
formItem.tag == 'dailyCss' && formItem.value?
<th className="text-center tableHeaderStyle">Day IP</th>:
formItem.tag == 'dailyAv' && formItem.value?
<th className="text-center tableHeaderStyle">Day Avrg</th>:
formItem.tag == 'highlight' && formItem.value?
<th className="text-center tableHeaderStyle">Day</th> :
null
})}
</tr>
</thead>
<tbody>{this.renderItems()}</tbody>
</table>
</div>
</div>
</div>
<RankingFooter/>
</div>
);
}
}
预先感谢您:)
解决方法
我认为您应该尝试将jQuery脚本附加到创建的window元素上,这样它们就可以在门户网站的DOM中使用。
例如,您可以在componentDidMount()中进行操作:
let s = document.createElement("script");
s.type = "text/javascript";
s.src = "<your-js-paths>";
this.externalWindow.document.head.append(s);
除此之外,您可以添加一个事件监听器,例如
this.externalWindow.addEventListener('load',() => {
// Code you'd like to run
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。