在 React Table 中具有动态内容的自定义 'No data' 组件

Question

我有一个反应 table 并且我想创建一个自定义 'no data' 组件，所以我设置如下

<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>
    );
  }
}

在 React Table 中具有动态内容的自定义 'No data' 组件

Custom 'No data' component with dynamic content in React Table

reactjs

react-table