Question

我是React的新手，并且使用

的MDBDataTable

https://mdbootstrap.com/docs/react/tables/datatables/#a-api-references-table

<MDBDataTable
    striped
    bordered
    hover
    paging={false}
    data={data}
/>

我正在尝试根据每行的pk向表中的每个元素添加href。

类似这样的东西：

<MDBDataTable
    striped
    bordered
    hover
    paging={false}
    data={data}

    renderItem={item => (
      <MDBDataTable.Item
        key={item.pk}

      >

        <MDBDataTable.Item.Meta

          title={
            <a href={`/item/${item.pk}`}>
              {item.word}
            </a>}

          description={item.explanation}
        />


        {item.description}

      </MDBDataTable.Item>

    )}
    />

这给了我以下错误：

警告：表格标签上的道具renderitem的值无效。从元素中删除它，或者传递一个字符串或数字值以将其保留在DOM中。

我已经看到renderItem在antd的List上工作了，但是不知道如何使用MDBDataTable获得类似的行为。知道如何完成href的事情吗？

Answer 1

没有MDBDataTable组件的renderItem属性。可以通过表格的基本用法来完成：

<MDBTable>
  <MDBTableHead>
    <tr>
      <th>Title</th>
      <th>Desc</th>
    </tr>
  </MDBTableHead>
  <MDBTableBody>
    {
       data.map((item,key) => <tr> <td> <a href={`/item/${item.pk}`}> {item.word} </a> </td> <td> {item.desc} </td> </tr>)
    }
  </MDBTableBody>
</MDBTable>

Answer 2

创建行数据时，我能够添加href。

let rowsData = []
for (var index = 0; index < myDataSet.length; index++) {
    let rowItem = {}
    rowItem["word"] = myDataSet[index].word

    rowItem["word"] =  <a href={`/item/${myDataSet[index].pk}`}>
                          {rowItem["word"]}
                        </a>
    rowsData.push(rowItem)
}
this.setState({
    tableRows: rowsData,
});

let data = {
  columns: [
    {
      label: 'Word',
      field: 'word',
      sort: 'asc',
      width: 150
    },
    ...
  ],
  rows: this.state.tableRows

}

<MDBDataTable
    striped
    bordered
    hover
    paging={false}
    data={data}
/>

React MDBTable呈现表中的每个项目

2 个答案: