创建自定义显示布局组件

Question

我正在尝试创建一个自定义布局组件，以便更好地设计我的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>

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

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

Answer 1

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

最后，我决定在我正在构建的新包中分享一些私人开发的组件。我添加了适用于Box 和Grid material-ui 的组件的布局。你可以看这里：ra-compact-ui