在React Portals中执行Jquery

Question

我正在开发一个使用React Portals的React应用程序。我已经能够用给定的数据在新窗口中加载门户(门户表示表中的数据。(。现在我想在门户中的表上添加Jquery DataTable库，但我无法做到。我认为我的Jquery库和DataTable启动功能在门户中不起作用。

注意：我试图添加一个简单的onClick，但我无法运行它。

请参阅下面的代码段以供参考。

用"；餐馆"；我的父组件中的组件

<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>
);
}
}

提前感谢：(

Answer 1

我认为您应该尝试将jQuery脚本附加到您创建的窗口元素中，这样它们就可以在门户的DOM中使用。

例如，您可以在组件DidMount((中执行以下操作：

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
});