Load Datatable. net динамически в аккордеонном теле ReactJS

Question

Я новичок в реакции JS и датируемый. net. То, что я пытаюсь сделать, это загрузить данные. net внутри тела аккордеона. Я пытался изменить функцию имени, основываясь на аккордеонном щелчке как $ (document) .ready (function () {$ (name) .DataTable () и имя таблицы, но все равно не сработало. Ниже приводится мой код.

введите код здесь

Класс Accordian расширяет React.Component {

render(){

    return(
       <div>
             <ModalForm show={this.state.isModal} close={this.closeModalForm} form={this.state.form} inputChange={this.inputChangeHandler} validator={this.state.validator}  onSubmit={(event)=>this.postData(event,this.state.modalType)} type={this.state.modalType} modalName={this.state.modalName}/>
             <ModalInfo show={this.state.isModalInfo.status} close={this.closeModalForm} message={this.state.isModalInfo.message} type={this.state.isModalInfo.type}/>
             <ModalDelete show={this.state.isModalDelete.status} close={this.closeModalForm} message={this.state.isModalDelete.message} isLoading={this.state.isModalDelete.loading} onDelete={(event,data)=>this.deleteData(event,data)}/>
             <div className="col-12">
                <Accordion defaultActiveKey="0">
                {this.state.dataList.map((data,i)=>(
                    <Card key={i}>
                            <Card.Header style={{ fontWeight: "600", backgroundcolor: "#fff" }}>
                            <Accordion.Toggle as={Button} variant="light" eventKey={i} onClick={(event)=>this.handleClick(event,i,data)}>
                                <span>{data.formName}</span>
                            </Accordion.Toggle>
                            </Card.Header>
                            <Accordion.Collapse eventKey={i}>
                                <Card.Body>
                                <div className="row text-left">
                                    <div className="col-12">
                                        {this.state.tableAtt.length < 1? <div>Sila Tambah Maklumat Atribut Terlebih Dahulu</div>:<button className="btn btn-primary mt-3" onClick={(event)=>this.openModalForm(event,'new',data.formName,data.formId)}>Tambah {data.formName}</button>}
                                    </div>
                                </div>
                                <div className="row">
                                    <div className="col-12">
                                         {this.state.isLoadingTable? <div></div>: <TableData isLoadingTable={this.state.isLoadingTable} dt={this.state.dt} table={this.state.table} tableAtt={this.state.tableAtt} tableData={this.state.tableData}></TableData>}
                                        {/* <Data tableData={this.state.tableData} tableAtt={this.state.tableAtt}></Data> */}
                                    </div>
                                </div>
                                </Card.Body>
                            </Accordion.Collapse>
                        </Card>
                ))}
                </Accordion>
            </div>
    )
}

Класс TableData расширяет React.Component {

state={
    isLoadingTable:true,
    table:"",
    name:"",
}

componentWillReceiveProps(nextProps) {
    console.log('componentWillReceiveProps', nextProps.isLoadingTable);
   // this.setState( isLoadingTable);
}

render(){
    console.log("dt"+this.props.isLoadingTable);
    console.log("dt"+this.props.dt);
    console.log("table"+this.props.table);
    const name = this.props.dt;
    var table = this.props.table;
    $(document).ready(function() {
        $(name).DataTable(
            {
                "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                "responsive": true,
                "language": {
                    "decimal":        "",
                    "emptyTable":     "No data available in table",
                    "info":           "Showing _START_ to _END_ of _TOTAL_ entries",
                    "infoEmpty":      "Showing 0 to 0 of 0 entries",
                    "infoFiltered":   "(filtered from _MAX_ total entries)",
                    "infoPostFix":    "",
                    "thousands":      ",",
                    "lengthMenu":     "Bilangan _MENU_ ",
                    "loadingRecords": "Loading...",
                    "processing":     "Processing...",
                    "search":         "Search:",
                    "zeroRecords":    "No matching records found",
                    "paginate": {
                        "first":      "First",
                        "last":       "Last",
                        "next":       "Next",
                        "previous":   "Previous"
                    },
                    "aria": {
                        "sortAscending":  ": activate to sort column ascending",
                        "sortDescending": ": activate to sort column descending"
                    }
                },
                "dom": "<'row'<'col-sm-12 col-md-12 pb-3 text-right'B>>" +
                "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-12 col-md-3'i><'col-sm-12 col-md-9'p>>",

                "bDestroy": true
            }
        );
    } );
    return(
        this.state.isLoadingTable ? <div></div>:
            <table  id={table} className="table table-striped table-bordered"}}>
                <thead>
                <tr>
                    <th>Bil</th>
                    {this.props.tableAtt.map((data, i)=> (
                    <th key ={i}>{data.formAttName}</th>
                    ))}
                     <th>Action</th>
                </tr>
                </thead>
                <tbody>
                        {this.props.tableData.map((data, i)=> (
                        <tr key ={i}>
                            <td> {i+1}</td>
                            {data.formdatadto.map((y,j)=>(
                                <td key={j}>{y.dataValue}</td>
                            ))}
                            <td>
                                <button className="three-button" color="primary" title="kemaskini">
                                    <div className="three-button-color-blue bounceIn delay-0-5s">
                                        <i className="material-icons">edit</i>
                                    </div>
                                </button>
                                <button className="three-button" color="primary" title="hapus">
                                    <div className="three-button-color-red animated bounceIn delay-0-5s">
                                        <i className="material-icons">delete</i>
                                    </div>
                                </button>
                            </td>
                        </tr>
                        ))}
                </tbody>
            </table>
    )
}

введите код здесь