Reactjs 数据表（）{ 常量元素=$（this.refs.table）； 让{options}={…this.props}| |{}； 让工具栏=”； 如果（选项.按钮）工具栏+=“B”； 如果（this.props.paginationLength）工具栏+=“l”； 如果（this.props.columnsHide）工具栏+=“C”； if（typeof options.ajax==“string”）{ 让url=options.ajax； options.ajax={ url:url， 完成：函数（xhr）{ //AjaxActions.contentLoaded（xhr） } }; } 选项={ …选项， ...{ dom: "" + “t”+ "", 语言：{ 搜索： " ", 长度菜单：“\u菜单” }, 自动宽度：false， 检索：对， 回答：对 } }; console.log（“const调用前”）； console.log（选项）； const _dataTable=element.dataTable（选项）； 如果（此.props.filter）{ //应用过滤器 元素上（“键控更改”，“第四次输入[type=text]”，函数（）{ _数据表 .栏目( $（本） .parent（） .index（）+“：可见” ) .search（此.value） .draw（）； }); } 如果（！工具栏）{ 要素 .parent（） .find（“.dt工具栏”） .附加( '' ); } 如果（此.道具.细节格式）{ const format=this.props.detailsFormat； 元素上（“单击”，“td.details控件”，函数（）{ const tr=$（this.closest（“tr”）； 常量行=_dataTable.row（tr）； if（row.child.isShown（））{ row.child.hide（）； tr.removeClass（“所示”）； }否则{ row.child（格式（row.data（））.show（）； tr.addClass（“显示”）； } }); } } render（）{ 让{ 儿童 选项， 详情格式：， 页码长度， …道具 }=这是道具； console.log（“CHA-In render”）； console.log（this.props）； 返回( {儿童} ); } }

好的，这个问题不是您现在如何传递数据。这更多的是关于如何处理datatables.net包装中的数据更新

我在Javascript和React中使用了很多datatables，但我从未见过表以这种方式稳定

当数据最终加载时，您需要检查何时更新组件。在shouldComponentUpdate中说true通常会起作用，但不会以创建表的方式起作用

下面有两个例子

Play.js

import Datatable from '../components/datatable';
import React from "react";

export default class AllBlogs extends React.Component {

constructor() {
    super();
    this.state = {
        blogs: [
            {
              "title":"функция Query — подробное руководство",
              "author":1,
              "viewers":213
            },
            {
              "title":"функция Query — подробное руководство",
              "author":1,
              "viewers":213
            }
        ],
    blogs_ajax:[]
  };

}


componentDidMount() {
    this.navItems();
}

async navItems() {
     //CHA - simulating a small gap in between the table initially loading and the data arriving.
    this.setState({blogs_ajax: this.state.blogs_ajax});
}

render() {

    console.log(this.state.blogs) // But I can see the result here

    return (

        <div id="content">

            <h1>React Table</h1>
            <Datatable
                options={{ data: this.state.blogs,
                           columns: [
                               {data: "title"},
                               {data: "author"},
                               {data: "viewers"},
                           ]
                        }} />
        </div>
    );
    }
}

从“../components/Datatable”导入数据表；
从“React”导入React；
导出默认类AllBlogs扩展React.Component{
构造函数（）{
超级（）；
此.state={
博客：[
{
“标题”：“фцццццццццццццццц1094，
"作者":1,，
“观众”：213
},
{
“标题”：“фцццццццццццццццц1094，
"作者":1,，
“观众”：213
}
],
blogs_ajax:[]
};
}
componentDidMount（）{
这是navItems（）；
}
异步navItems（）{
//CHA-模拟最初加载的表和到达的数据之间的小间隙。
this.setState（{blogs\u ajax:this.state.blogs\u ajax}）；
}
render（）{
console.log（this.state.blogs）//但是我可以在这里看到结果
返回(
反应台
);
}
}

接下来是从repo中裁剪出的datatables包装器示例。看看前缀为CHA的评论

import React from "react";
import $ from "jquery";

require("datatables.net-bs");
require("datatables.net-buttons-bs");
require("datatables.net-buttons/js/buttons.colVis.js");
require("datatables.net-buttons/js/buttons.flash.js");
require("datatables.net-buttons/js/buttons.html5.js");
require("datatables.net-buttons/js/buttons.print.js");
require("datatables.net-colreorder-bs");
require("datatables.net-responsive-bs");
require("datatables.net-select-bs");

export default class Datatable extends React.Component {

    componentDidMount() {
        this.datatable(this.props.data);

        console.log("CHA - In datables.js did mount - data will be undefined initially");
        console.log(this.props.data);
    }

    shouldComponentUpdate(nextProps, nextState){

        console.log("CHA - shouldcomponentupdate - we should now have data.");
        console.log(nextProps.options.data);
        console.log("CHA - because of the way you build the datatable, we need to rebuild instead of redraw.");
        this.datatable(nextProps.options.data);

        return true;
    }

    datatable() {
        const element = $(this.refs.table);
        let { options } = { ...this.props } || {};

        let toolbar = "";

        if (options.buttons) toolbar += "B";
        if (this.props.paginationLength) toolbar += "l";
        if (this.props.columnsHide) toolbar += "C";

        if (typeof options.ajax === "string") {
            let url = options.ajax;
            options.ajax = {
            url: url,
            complete: function(xhr) {
          // AjaxActions.contentLoaded(xhr)
        }
    };
}

options = {
  ...options,
  ...{
    dom:
      "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs text-right'" +
      toolbar +
      ">r>" +
      "t" +
      "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
    oLanguage: {
      sSearch:
        "<span class='input-group-addon input-sm'><i class='glyphicon glyphicon-search'></i></span> ",
      sLengthMenu: "_MENU_"
    },
    autoWidth: false,
    retrieve: true,
    responsive: true
  }
};
console.log("before const call");
console.log(options);
const _dataTable = element.DataTable(options);

if (this.props.filter) {
  // Apply the filter
  element.on("keyup change", "thead th input[type=text]", function() {
    _dataTable
      .column(
        $(this)
          .parent()
          .index() + ":visible"
      )
      .search(this.value)
      .draw();
  });
}

if (!toolbar) {
  element
    .parent()
    .find(".dt-toolbar")
    .append(
      '<div class="text-right"><img src="assets/img/logo.png" alt="SmartAdmin" style="width: 111px; margin-top: 3px; margin-right: 10px;"></div>'
    );
}

if (this.props.detailsFormat) {
  const format = this.props.detailsFormat;
  element.on("click", "td.details-control", function() {
    const tr = $(this).closest("tr");
    const row = _dataTable.row(tr);
    if (row.child.isShown()) {
      row.child.hide();
      tr.removeClass("shown");
    } else {
      row.child(format(row.data())).show();
      tr.addClass("shown");
    }
        });
    }
  }

    render() {
        let {
              children,
              options,
              detailsFormat,
              paginationLength,
              ...props
        } = this.props;

        console.log("CHA - In render");
        console.log(this.props);

        return (
            <table {...props} ref="table">
                {children}
            </table>
        );
    }
}

从“React”导入React；
从“jquery”导入$；
要求（“datatables.net bs”）；
要求（“datatables.net按钮bs”）；
require（“datatables.net buttons/js/buttons.colVis.js”）；
require（“datatables.net buttons/js/buttons.flash.js”）；
require（“datatables.netbuttons/js/buttons.html5.js”）；
require（“datatables.net buttons/js/buttons.print.js”）；
要求（“datatables.net colreorder bs”）；
要求（“datatables.net响应bs”）；
要求（“datatables.net选择bs”）；
导出默认类Datatable扩展React.Component{
componentDidMount（）{
this.datatable（this.props.data）；
log（“CHA-In-datables.js没有挂载-数据最初将是未定义的”）；
console.log（this.props.data）；
}
shouldComponentUpdate（下一步，下一步状态）{
log（“CHA-shouldcomponentupdate-我们现在应该有数据了。”）；
log（nextrops.options.data）；
log（“CHA-由于您构建数据表的方式，我们需要重新构建而不是重新绘制。”）；
这个.datatable（nextrops.options.data）；
返回true；
}
数据表（）{
常量元素=$（this.refs.table）；
让{options}={…this.props}| |{}；
让工具栏=”；
如果（选项.按钮）工具栏+=“B”；
如果（this.props.paginationLength）工具栏+=“l”；
如果（this.props.columnsHide）工具栏+=“C”；
if（typeof options.ajax==“string”）{
让url=options.ajax；
options.ajax={
url:url，
完成：函数（xhr）{
//AjaxActions.contentLoaded（xhr）
}
};
}
选项={
…选项，
...{
dom:
"" +
“t”+
"",
语言：{
搜索：
" ",
长度菜单：“\u菜单”
},
自动宽度：false，
检索：对，
回答：对
}
};
console.log（“const调用前”）；
console.log（选项）；
const _dataTable=element.dataTable（选项）；
如果（此.props.filter）{
//应用过滤器
元素上（“键控更改”，“第四次输入[type=text]”，函数（）{
_数据表
.栏目(
$（本）
.parent（）
.index（）+“：可见”
)
.search（此.value）
.draw（）；
});
}
如果（！工具栏）{
要素
.parent（）
.find（“.dt工具栏”）
.附加(
''
);
}
如果（此.道具.细节格式）{
const format=this.props.detailsFormat；
要素
import React from "react";
import $ from "jquery";

require("datatables.net-bs");
require("datatables.net-buttons-bs");
require("datatables.net-buttons/js/buttons.colVis.js");
require("datatables.net-buttons/js/buttons.flash.js");
require("datatables.net-buttons/js/buttons.html5.js");
require("datatables.net-buttons/js/buttons.print.js");
require("datatables.net-colreorder-bs");
require("datatables.net-responsive-bs");
require("datatables.net-select-bs");

export default class Datatable extends React.Component {

    componentDidMount() {
        this.datatable(this.props.data);

        console.log("CHA - In datables.js did mount - data will be undefined initially");
        console.log(this.props.data);
    }

    shouldComponentUpdate(nextProps, nextState){

        console.log("CHA - shouldcomponentupdate - we should now have data.");
        console.log(nextProps.options.data);
        console.log("CHA - because of the way you build the datatable, we need to rebuild instead of redraw.");
        this.datatable(nextProps.options.data);

        return true;
    }

    datatable() {
        const element = $(this.refs.table);
        let { options } = { ...this.props } || {};

        let toolbar = "";

        if (options.buttons) toolbar += "B";
        if (this.props.paginationLength) toolbar += "l";
        if (this.props.columnsHide) toolbar += "C";

        if (typeof options.ajax === "string") {
            let url = options.ajax;
            options.ajax = {
            url: url,
            complete: function(xhr) {
          // AjaxActions.contentLoaded(xhr)
        }
    };
}

options = {
  ...options,
  ...{
    dom:
      "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs text-right'" +
      toolbar +
      ">r>" +
      "t" +
      "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
    oLanguage: {
      sSearch:
        "<span class='input-group-addon input-sm'><i class='glyphicon glyphicon-search'></i></span> ",
      sLengthMenu: "_MENU_"
    },
    autoWidth: false,
    retrieve: true,
    responsive: true
  }
};
console.log("before const call");
console.log(options);
const _dataTable = element.DataTable(options);

if (this.props.filter) {
  // Apply the filter
  element.on("keyup change", "thead th input[type=text]", function() {
    _dataTable
      .column(
        $(this)
          .parent()
          .index() + ":visible"
      )
      .search(this.value)
      .draw();
  });
}

if (!toolbar) {
  element
    .parent()
    .find(".dt-toolbar")
    .append(
      '<div class="text-right"><img src="assets/img/logo.png" alt="SmartAdmin" style="width: 111px; margin-top: 3px; margin-right: 10px;"></div>'
    );
}

if (this.props.detailsFormat) {
  const format = this.props.detailsFormat;
  element.on("click", "td.details-control", function() {
    const tr = $(this).closest("tr");
    const row = _dataTable.row(tr);
    if (row.child.isShown()) {
      row.child.hide();
      tr.removeClass("shown");
    } else {
      row.child(format(row.data())).show();
      tr.addClass("shown");
    }
        });
    }
  }

    render() {
        let {
              children,
              options,
              detailsFormat,
              paginationLength,
              ...props
        } = this.props;

        console.log("CHA - In render");
        console.log(this.props);

        return (
            <table {...props} ref="table">
                {children}
            </table>
        );
    }
}

${this.state.postBlog.status ?
<Datatable
options={{
columns: [
{data: "title"},
{data: "author"},
{data: "viewers"},
]
}}

paginationLength={true}
className="table table-striped table-bordered table-hover"
width="100%"
>