React 管理员。 React 无法识别 DOM 元素上的“emptyWhileLoading”道具

Question

反应管理员。 在我的例子中，默认布局组件（和）在加载数据时返回 null。我改用自定义布局组件，我必须处理数据尚未定义的情况。

这意味着以下加载失败，出现“ReferenceError: data is not defined”错误。

为了解决这个问题，我想使用道具提供的。启用后，在定义数据之前不会呈现其子项。

但我收到警告：React 无法识别 DOM 元素上的

emptyWhileLoading

道具。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写

emptywhileloading

。如果您不小心从父组件传递了它，请将其从 DOM 元素中移除。

我该如何解决这个问题？

export default props => (
  <List
    emptyWhileLoading
    pagination={ <Pagination /> }
    bulkActionButtons={ false }
    sort={{ field: 'id', order: 'DESC' }}
    filters={ <ListFilter /> }
    actions={ <ListActions /> }
    { ...props }
  >
    <Datagrid rowClick="edit">
      <TextField source="id" />
      <TextField source="name" />
      <TextField source="type" />
      <TextField source="created_by_username" />
      <FunctionField label="Created at" source="created_at" render={ (record, key) => record[key] ? formatDatetime(record[key]) : null } />
      <FunctionField label="Updated at" source="updated_at" render={ (record, key) => record[key] ? formatDatetime(record[key]) : null } />
      <AudienceActions />
    </Datagrid>
  </List>
);

我使用文档 React Admin https://marmelab.com/react-admin/List.html#emptywhileloading

我在组件中添加了emptyWhileLoading，但没有帮助

Answer 1

您可以为您的 DOM 元素编写一个 React 组件包装器并删除您不需要的任何属性：

const WrapperDiv = (props) => {
  const {
    emptyWhileLoading, 
    ...rest
  } = props
  ...
  return <div {...rest}>Wrapper</div>
}