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

Question

我有一个 react 表，我想创建一个自定义的“无数据”组件，所以我按如下方式设置了它

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

{NoData} 是我构建的 React 组件 - 我将其导入以在页面顶部使用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>
    );
  }
}