React Table 中具有動態內容的自定義“無數據”組件

Question

我有一個反應表，我想創建一個自定義的“無數據”組件，因此我將其設置如下

<ReactTable
  data={data}
  columns={columns}
  NoDataComponent={NoData}
/>

{NoData} 是我構建的 React 組件 - 我將其導入以在頁面頂部做出反應，這很好用。

但是現在我不得不為組件添加一個動態標題，通常如果我想將此組件添加到渲染方法中，我會這樣添加

<NoData
  noDataTitle="This is the dynamic title"
/>

我認為沒有辦法將帶有變量的 React 組件添加到 ReactTable 上的“NoDataComponent”變量中，因此我創建了一個 const 來為我執行此操作並最終得到類似的結果

import NoData from '../page/NoData';

class Parent extends React.Component {

const noDataConst = (
    <NoData
      noDataTitle="This is the dynamic title"
    />
  )

return (
  <div>
    <ReactTable
      data={data}
      columns={columns}
      NoDataComponent={noDataConst}
    />
  </div>
)

但這仍然不起作用，我是否以錯誤的方式解決了這個問題？ 有人可以指出我出錯的地方或指導我查看一些很棒的文檔嗎

Answer 1

您可以創建一個用於NoDataComponent道具的新函數組件，而不是將noDataConst作為變量。

const NoDataConst = props => (
  <NoData noDataTitle="This is the dynamic title" {...props} />
);

class Parent extends React.Component {
  render() {
    return (
      <div>
        <ReactTable
          data={data}
          columns={columns}
          NoDataComponent={NoDataConst}
        />
      </div>
    );
  }
}