Datatables.net 和 ReactJS，在列中渲染一个 ReactJS 组件

IT技术 jquery reactjs datatables
2021-04-30 13:10:08

我有以下带有数据表的组件：

import React, { Component } from 'react'
import { Link } from 'react-router'


import { PanelContainer, Panel, PanelBody, Grid, Row, Col } from '@sketchpixy/rubix'

import $ from 'jquery'
import DataTable from 'datatables.net'

$.DataTable = DataTable

const columns = [{
  title: '<input type="checkbox" />',
  data: 'check',
}, {
  title: 'Foto',
  data: 'avatar',
}, {
  title: 'Nombre',
  data: 'name',
}, {
  title: 'Dirección',
  data: 'address',
}, {
  title: 'Clasificación',
  data: 'clasification',
}, {
  title: 'Editar',
  data: 'editLink',
  render: x => `<a href="${x}"><i class="icon-fontello-edit"></i></a>`, // <-- this line i'm interested!
}]

class Table extends Component {
  transform(content) {
    return content.map(x => ({
      ...x,
      check: '<input type="checkbox" />',
      avatar: '<img src="/public/imgs/app/nico.jpg" width="40" height="40" style="border-radius: 100%;">',
      clasification: `<i class="${x.clasification.icon}"></i> ${x.clasification.name}`,
    }))
  }

  componentDidMount(nextProps, nextState) {
    this.table = $(this.refs.main).DataTable({
      dom: '<"data-table-wrapper"tip>',
      data: [],
      columns,
      language: {
        info: 'Mostrando _START_-_END_ de _TOTAL_ puntos',
        infoEmpty: 'No hay puntos',
        paginate: {
          next: 'Siguiente',
          previous: 'Anterior',
        },
      },
    })
  }

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

  componentWillUnmount() {
    $('.data-table-wrapper')
    .find('table')
    .DataTable()
    .destroy(true)
  }

  render() {
    return (
        <table
          className="table table-striped hover"
          cellSpacing="0"
          width="100%"
          ref="main"
        />
    )
  }
}

export default p =>
  <PanelContainer>
    <Panel>
      <PanelBody>
        <Grid>
          <Row>
            <Col xs={12}>
              <Table data={p.data} />

            </Col>
          </Row>
        </Grid>
      </PanelBody>
    </Panel>
  </PanelContainer>

问题是，对于数据表，我需要使用react-router呈现链接，使用锚链接（）不是解决方案，因为它会重新呈现整个页面。所以我需要在具有指定链接的列中呈现一个自定义组件。链接是用 ID 构建的。

2个回答

我将为其他开发人员回答我自己的问题。我所做的是以下内容：

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),
} // ... the rest of the code

createdCell 方法接收实际的 dom 元素，因此您可以直接在那里渲染 react 组件，唯一的问题是您无法渲染 Links，这是因为路由器需要一个上下文，而该上下文丢失了。所以最好的方法是使用一个方法去特定的路由，在这种情况下goto是this.props.router.push从父级传递过来的。

也许你可以使用 ReactDOM.render。该函数接受一个组件和一个容器，因此您可以将您的链接初始化为空节点，并将您的props作为数据类型。然后在 componentDidMount 中，您可以循环调用一个如下所示的函数：编辑：Link 组件需要 react 上下文来隐式导航，我认为 reactDOM.render 不会将您的上下文对象与其创建的对象相协调。最好的办法是创建一个自定义链接组件以在此处使用，该组件使用 browserHistory(react-router v3) 或仅历史库进行导航。

componentDidMount() {
 function populateLinks(node) {
   const linkURL = node.dataset.linkURL;
   reactDOM.render(<Link to={linkURL}>Hello</Link>, node);
  }
$('.link-div').get().forEach(populateLinks);
}

看起来你会指定一个特定的 dom 节点来渲染，如下所示：

$('#example').dataTable( {
  "columnDefs": [ {
    "targets": 0,
    "data": "download_link",
    "render": function ( data, type, full, meta ) {
      return `<div class="link-div" data-linkURL=${data}></div>`;
    }
  } ]
} );

让我知道事情的后续！

其它你可能感兴趣的问题
上一篇在 React Native 视图上强制 onLayout 下一篇找不到酶适配器react 16 的声明文件？