使用 ReactJS 的 Datatables.net，在一列中渲染一个 ReactJS 组件

Posted 2023-05-07

【中文标题】使用 ReactJS 的 Datatables.net，在一列中渲染一个 ReactJS 组件

【英文标题】：Datatables.net with ReactJS, render a ReactJS component in a column

【发布时间】：2017-10-20 00:28:21

【问题描述】：

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

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"   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"
          
          ref="main"
        />
    )
  


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

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

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

【问题讨论】：

上！，需要一个答案:)

已经为此苦苦挣扎了一段时间。你找到答案了吗？

我对一个未决问题有两个多星期的相同问题，有人回答。 :(

我会把它贴在这里。如果有人知道答案，请也帮助我。在为此苦苦挣扎了一段时间后，我没有下定决心。 ***.com/questions/43927638/…

【参考方案1】：

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

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。

【讨论】：

但是.. 你渲染的是a，而不是react路由器的链接，对吧？ .你能举一个更扩展的例子吗？或者通过这里，请回答我，好吗？ ***.com/questions/43927638/… 。谢谢。

链接不起作用，因为它需要一个上下文，这就是为什么你需要添加一个 onClick 事件来处理路由。

轻松处理路由，无需使用 标签，使用 react router 4+，您可以像这样重定向到其他页面： this.props.history.push( pathname: '/your_path '，状态： id: some_value );详情请参考：***.com/a/31079244/960326

@Nico 你能看看这个，不是很相似，但我被困在这里，需要一个答案：***.com/questions/53945879/…。谢谢。

【参考方案2】：

也许你可以利用 ReactDOM.render。该函数接受一个组件和一个容器，因此您可以将链接初始化为空节点，并将您的道具作为数据类型。然后在 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>`;
    
   ]
 );

告诉我进展如何！

【讨论】：

我试过了，但它不起作用。我也导入了 ReactDOM：import ReactDOM from 'react-dom'; 但我收到错误 ReactDom is not defined

警告：失败的道具类型：道具to在Link中标记为必填，但其值为undefined。在 Link ------ 这是由于未识别 href 属性

警告：上下文类型失败：上下文router在Link中标记为必填，但其值为undefined。 in Link ------ 不知道为什么

Uncaught TypeError: Cannot read property 'history' of undefined --- 这都没有

4.1.1。最新的。另外我在你的渲染上添加了ReactDOM.render(<Link to=linkURL>HELLO</Link>, node);，因为链接有一个名字