使用ReactJS的Datatables.net在列中呈现ReactJS组件
我有以下组件与数据表：
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: '', 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 => ``, // ({ ...x, check: '', avatar: '
', clasification: ` ${x.clasification.name}`, })) } componentDidMount(nextProps, nextState) { this.table = $(this.refs.main).DataTable({ dom: '', 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 (
) } } export default p =>
问题是，对于数据表，我需要使用反应路由器呈现链接，使用anchorlink（）不是解决方案，因为它将重新呈现整个页面。 所以我需要使用指定的链接在列中呈现自定义组件。 该链接使用ID构建。
我将为其他开发人员回答我自己的问题。 我做的是以下内容：
columnDefs: [{ targets: 5, createdCell: (td, cellData, rowData, row, col) => ReactDOM.render( this.props.goto(cellData) }> , td), } // ... the rest of the code
createdCell方法接收实际的dom元素，因此您可以直接在那里呈现react组件，唯一的问题是您无法呈现Links，这是因为路由器需要上下文并且上下文丢失。 所以最好的方法是使用一个方法转到特定的路由，在这种情况下， goto是从父this.props.router.push传递的this.props.router.push 。
也许你可以使用ReactDOM.render。 该函数接收组件和容器，因此您可以将链接初始化为空节点，并将props作为数据类型。 然后在componentDidMount中，你可以遍历并调用一个如下所示的函数：edit：链接组件需要使用react上下文隐式导航，我不认为reactDOM.render会将你的上下文对象与它创建的上下文对象进行协调。 最好的办法是创建一个自定义链接组件，在这里使用browserHistory（react-router v3）或仅使用历史库进行导航。
componentDidMount() { function populateLinks(node) { const linkURL = node.dataset.linkURL; reactDOM.render(Hello, node); } $('.link-div').get().forEach(populateLinks); }
看起来您将使用以下内容指定要呈现的特定dom节点：
$('#example').dataTable( { "columnDefs": [ { "targets": 0, "data": "download_link", "render": function ( data, type, full, meta ) { return ``; } } ] } );
让我知道事情的后续！