使用ReactJS的Datatables.net在列中呈现ReactJS组件 [英] Datatables.net with ReactJS, render a ReactJS component in a column

问题描述

我有以下数据表组件：

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>

问题在于，对于数据表，我需要使用anchorlink呈现带有反应路由器的链接（）不是解决方案，因为它将重新呈现整个页面。所以我需要使用指定的链接在列中呈现自定义组件。该链接使用ID构建。

The problem is that, with datatables, i need to render a Link with react router, using an anchorlink () is not a solution because it will re-render the whole page. So i need to render a custom component in the column with the specified link. The link is constructed with the ID.

推荐答案

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

I will answer my own question for other developers. What i did is the following:

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组件，唯一的问题是您无法呈现链接，这是因为路由器需要上下文并且上下文丢失。所以最好的方法是使用一种方法去特定路线，在这种情况下 goto 是 this.props.router.push 从父母传递。

The createdCell method receives the actual dom element, so you can render the react component directly there, the only problem is that you cannot render Links, that is because the router needs a context and that context is lost. So the best way is to use a method to go to the specific route, which in this case goto is this.props.router.push passed from the parent.

这篇关于使用ReactJS的Datatables.net在列中呈现ReactJS组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！