创建一个自定义的显示布局组件

如何解决创建一个自定义的显示布局组件

我正在尝试创建一个自定义布局组件，以便可以更好地设计Show页面。

我不确定为什么有些东西可以工作，而有些却不能。我的计划是使用Material-UI <Grid>组件。我知道Grid组件不会传递道具，那么我将扩展为自己的道具：

export default function OrderShow(props) {
    return (
        <Show {...props}>
            <CustomGrid>
                <TextField source="shortId" label="Short ID" />
            </CustomGrid>
        </Show>
    );
}

我的CustomGrid组件（还只是草稿）正在克隆其子代以传递道具：

function CustomGrid(props) {
    return React.Children.map(props.children,(child) => React.cloneElement(child,props));
}

当我使用它时，TextField会收到source，并正确呈现它。但是label不见了。我不确定为什么会这样。

另一个问题是，当我尝试将CustomGrid与ReferenceField一起使用时，它根本不起作用：

<Show {...props}>
  <CustomGrid>
    <ReferenceField source="user" reference="users" label="Name" link="show">
      <FunctionField render={(record) => `${record.firstName} ${record.lastName}`} />
    </ReferenceField>
  </CustomGrid>
</Show>

我可以看到道具一直传递到ReferenceField，但在到达FunctionField之前就丢失了：

是否有更好的方法来自定义SimpleShowLayout并继续使用TextField和react-admin中的其他组件？

解决方法

是的，有办法。简单地说，react-admin的{​​{1}}比将道具传递给子级字段更加复杂。这就是为什么您必须递归迭代直到到达某个字段并执行SimpleShowLayout所要做的事情。

最后，我决定在我正在构建的新程序包中共享一些私有开发的组件。我添加了可与react-admin和Box Grid的组件一起使用的布局。您可以在这里查看：ra-compact-ui