Question

我有一个反应表，我想创建一个自定义的“无数据”组件，因此我将其设置如下

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

{NoData}是我构建的一个React组件-我将其导入以在页面顶部做出反应，效果很好。

但是现在我必须为该组件添加一个动态标题，通常如果我想将该组件添加到render方法中，我会像这样添加它

<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

您可以创建一个用于noDataConst道具的新功能组件，而不必将NoDataComponent作为变量。

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中具有动态内容

1 个答案: