在数据 table 中反应添加 child table

Question

我在我的 React 应用程序中使用 jQuery 数据 table。在连续单击一个按钮时，我想显示一个 child 数据 table。我能够使用 jQuery 做到这一点。问题是 child table header 中有一个按钮，单击它我想在 React 中打开一个模式，但无法正常工作。这是代码。

row.child(
                        '<div class="ShowTable">' +
                        '<div class="TableHeader">' +
                        '<h4>Server - ' + rowData.ip + '</h4>' +
                        '<div><button type="button" class=" text-nowrap" onclick="Show(true)"> Push</button></div>' +
                        '</div>' +
                        '<table class="child_table" id = "child_details' + index + '" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
                        '<thead><tr><th>S/N</th><th>Domain</th><th>File Transfer</th><th>Status</th><th>Push</th><th>Action</th></tr></thead><tbody>' +
                        '</tbody></table>' +
                        '</div>').show();

所以我尝试用 React 编写它，代码如下

ReactDOM.render(
                        <td colSpan={6}>
                        <div className="ShowTable">
                            <div className="TableHeader">
                                <h4>Server - {rowData.ip}</h4>
                                <div><button type="button" className="text-nowrap" onClick={e => { Show(true) }}>Bulk Push</button></div>
                            </div>
                            <table className="child_table" id={`child_details${index}`} cellPadding={5} cellSpacing={0} border="0" style={{paddingLeft:"50px"}}>
                                <thead><tr><th>S/N</th><th>Domain</th><th>File Transfer</th><th>Status</th><th>Push</th><th>Action</th></tr></thead><tbody>
                                </tbody></table>
                        </div >
                        </td>
                        , row.node())

这里按钮点击有效，但问题不是 child table 而是替换当前 parent table 行。这是因为我正在使用 row.node()。那么如何将其显示为 child table？我想要 child tr。我试过 row.child().node() 但它不起作用。或者有什么方法可以从 jQuery 调用 react 函数？这样我就可以使用第一个代码本身了。

Answer 1

我可以使用下面的代码做到这一点。

row.child('').show()

ReactDOM.render(
                        <td colSpan={6}>
                        <div className="ShowTable">
                            <div className="TableHeader">
                                <h4>Server - {rowData.ip}</h4>
                                <div><button type="button" className="text-nowrap" onClick={e => { Show(true) }}>Bulk Push</button></div>
                            </div>
                            <table className="child_table" id={`child_details${index}`} cellPadding={5} cellSpacing={0} border="0" style={{paddingLeft:"50px"}}>
                                <thead><tr><th>S/N</th><th>Domain</th><th>File Transfer</th><th>Status</th><th>Push</th><th>Action</th></tr></thead><tbody>
                                </tbody></table>
                        </div >
                        </td>
                        , row.child()[0])

首先我添加了子行，然后使用 row.child()[0] 获取该行并将其传递给 ReactDOM.render() 函数

在数据 table 中反应添加 child table

React add child table in datatable

javascript

jquery

datatables

reactjs