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