Question

我是React的新手，我正在尝试将DataTables与我在render（）中创建的表一起使用。到目前为止我的代码看起来像这样 - searchForm.js：

componentDidMount() {
    $(this.refs.table).DataTable({});
  }

  render() {
    var headerComponents = this.generateHeaders(),
        rowComponents = this.generateRows();
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input className="resizedTextbox" type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="Enter Material to search"/>
          <br />
          <br />
          <input className="btn btn-primary" type="submit" value="Search" />
          <button type="button" className="btn btn-primary" onClick={this.resetSearch}>Reset</button>
        </form>
        <br />
        <div className="table-responsive">
            <table ref="table" className="table">
                <thead> {headerComponents} </thead>
                <tbody> {rowComponents} </tbody>
            </table>
        </div>
      </div>
    );
  }

的index.html：

<!DOCTYPE html>
<html>
  <body>
    <header style="background-color: #990000;margin-top: 0;position: relative;top: -10px;">
      <h1 style="margin-top: 0;color: white;padding: 10px;">DMFT Search</h1>
    </header>
    <div align="center" >
      <div id="main"></div>
    </div>
    <div id="search"></div>
    <!-- scripts -->
    <script src="{{ url_for('static', filename='bower_components/jquery/dist/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='bower_components/react/react.js') }}"></script>
    <script src="{{ url_for('static', filename='bower_components/react/react-dom.min.js') }}"></script>
    <script src="{{ url_for('static', filename='scripts/js/searchForm.js') }}"></script>
    <script src="{{ url_for('static', filename='bower_components/datatables.net/js/jquery.dataTables.js') }}"></script>
  </body>
</html>

问题是当我加载index.html时，我看不到DataTables正常工作，我在控制台中得到一个异常：

Uncaught TypeError: $(...).DataTable is not a function
    at SearchForm.componentDidMount

请告知我是否以正确的方式行事。我没有找到关于此的蚂蚁帮助。

Answer 1

Index.html不会被反应处理，所以只需使用普通字符串。试试这个：

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/react/react.js"></script>
<script src="bower_components/react/react-dom.min.js"></script>
<script src="scripts/js/searchForm.js"></script>
<script src="bower_components/datatables.net/js/jquery.dataTables.js"></script>

Answer 2

我知道它很老，但是可以尝试以下方法来帮助其他人。

在jquery文件后的public / index.html中包括datatables js文件或CDN链接。
在公共目录中创建一个js文件夹，并使用代码创建一个custom.js文件

$(function() { $("#example").DataTable(); });
创建一个Table组件，然后在componentDidMount或useEffect内添加此代码

const script = document.createElement("script"); script.src = "/js/custom.js"; script.async = true; document.body.appendChild(script);
从“表”组件返回ID为“ example”的表

<table id="example" className="table table-striped table-bordered"> <thead> <tr> <th>head 1</th> <th>head 2</th> </tr> </thead> <tbody> <tr>Data 1</tr> <tr>Data 2</tr> </tbody> </table>

使用DataTables做出反应

2 个答案: