-AJAX數據表-在“列”（渲染）中添加條件以返回React-Router的按鈕（鏈接）不起作用-ReactJS-

Question

我有一個數據表是：

export default class TablaMisIncidencias extends React.Component {
    constructor() {
        super();
    }

    componentDidMount() {
        $('#idTablaMisIncidencias').DataTable({
            responsive: true,
            "paging": true,
            "ordering": true,
            select: false,
            "lengthMenu": [[5, 10, 25, -1], [5, 10, 25, "Todas"]],
            columnDefs: [
                { 
                    responsivePriority: 1, 
                    targets: 0 
                },
                { 
                    responsivePriority: 2, 
                    targets: 1 
                },
                { 
                    responsivePriority: 3, 
                    targets: 5 
                },
                { 
                    responsivePriority: 4, 
                    targets: 2 
                },
                { 
                    responsivePriority: 5, 
                    targets: 3 
                },
                { 
                    responsivePriority: 6, 
                    targets: 4 
                }
            ],
            "ajax": {
                "url": "https://jsonplaceholder.typicode.com/comments",
                "dataSrc": ""
            },
            "columns": [
                { "data": "postId" },
                { "data": "id" },
                { "data": "name" },
                { "data": "name" },
                { "data": "body" },
                { "data": "body",
                    sortable: false,
                    //HERE IS THE ERROR
                    "render": function ( data, type, full, meta ) {
                        //console.log(full)
                        if (full.postId == 0) {
                            return (`
                                <Link to="eee" class='btn btn-info btn-xs' title="Editar"><span class="glyphicon glyphicon-edit"></span> Editar</Link>
                            `);
                        } else {
                            return (`
                                <a href="eee" class='btn btn-success btn-xs' title="Tramitada"><span class="glyphicon glyphicon-ok"></span> Tramitada</a>
                            `);
                        }
                    }
                },
            ]
        });
    }

如果看到注釋行：// HERE IS THE ERROR，在此函數渲染中，我有兩個非常相似的結果。 如果postId == 0，則可能返回一個Link否則可能返回一個a 。 a和Link都相同。 唯一的區別是a是一個HTML標簽和Link是一個陣營，路由器標簽。 好吧，當render返回a它顯示為一個按鈕（這是我想要的，但是我也希望Link也會發生這種情況）； 當渲染返回Link它將顯示為文本和glyphicon，它們全部分開，不顯示為按鈕，也不重定向。 那么，為什么a返回得很好而Link返回得不好？ 我該如何解決？

謝謝。

Answer 1

數據表很難與react一起工作，主要原因是您不能直接在列的渲染屬性中渲染Components，而是必須使用createdCell屬性使用React實際渲染某些東西。

我在您的代碼上看到的第一件事是您缺乏data屬性，因此您至少應添加en ampty array [] 。 之后，您應該具有componentDidUpdate來重新呈現表，以防收到新的道具：

componentDidUpdate() {
    this.table.clear()
    this.table.rows.add(this.transform(this.props.data))
    this.table.draw()
}

此方案將清除表，然后將數據添加到表中並再次繪制，請注意this.props.data是元素數組。

使用React在列中繪制鏈接

Datatables的壞處在於它不允許直接繪制React組件。 但是相反，當您初始化表時，它將使您可以訪問createdCell屬性內的DOM引用：

this.table = $(this.refs.main).DataTable({
  dom: '<"data-table-wrapper"tip>',
  data: [],
  columns,
  language: {
    info: 'Showing _START_-_END_ from _TOTAL_ entities',
    infoEmpty: 'No hay puntos',
    paginate: {
      next: 'Siguiente',
      previous: 'Anterior',
    },
  },
  headerCallback: (thead, data, start, end, display) =>
    ReactDOM.render(
      <input type="checkbox"
        onChange={() => this.props.toggleSelectAll()}
        checked={this.props.selected.length === this.props.data.length} />,
      thead.children[0]),
  columnDefs: [{
    targets: 5,
    createdCell: (td, cellData, rowData, row, col) =>
      ReactDOM.render(
        <a style={{ cursor: 'pointer' }}
          onClick={() => this.props.goto(cellData) }>
          <i className="icon-fontello-edit"></i>
        </a>, td),
  }],
})

現在，非常重要的一點是要注意<Link />需要上下文，因此您無法添加to屬性，因為它無法理解鏈接定義，因此您需要使用函數來處理，在這種情況下，使用onClick處理程序呈現錨標記，此處理程序在父組件中定義如下：

<Table
  goto={x => this.props.router.push(x)}
  data={this.props.table.data} />

該函數將通過渲染字段接收url，並將其推送到路由器中。 現在您有了歷史記錄和鏈接。