Пользовательский компонент «Нет данных» с динамическим содержимым в React Table - PullRequest
Новая
       22

Пользовательский компонент «Нет данных» с динамическим содержимым в React Table

1 голос
/ 16 апреля 2019

У меня есть таблица реагирования, и я хочу создать пользовательский компонент «без данных», поэтому я настроил его следующим образом 

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

{NoData} - это компонент React, который я создал- Я импортирую это, чтобы отреагировать вверху страницы, это прекрасно работает.

Но теперь мне пришлось добавить динамический заголовок к компоненту, обычно, если я хотел добавить этот компонент к методу рендеринга.добавил бы его как таковой 

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

Я не думаю, что есть способ добавить компонент React с переменными в переменную NoDataComponent в ReactTable, поэтому я создал 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>
)

Но это все еще не работает, я ошибся?Может кто-нибудь указать, где я ошибся, или направить меня к какой-нибудь документации, которая была бы удивительной

1 Ответ

1 голос
/ 16 апреля 2019

Вместо noDataConst в качестве переменной вы можете создать новый функциональный компонент, который вы используете для NoDataComponent prop. 

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