admin-on-rest - TabbedShowLayout/TabbedForm 中的条件 Tab/FormTab 渲染

Question

仅当记录具有特定属性时，我才想在 TabbedShowLayout 中显示一个 Tab。我尝试创建一个自定义组件，如下所示:

const EventsTab = ({...props, record}) => {
  return record && record.hasEvents &&
  <Tab label="Tab2">
    test
  </Tab>
}

然后将其添加到 Show 布局中:

<Show {...props}>
  <TabbedShowLayout>
    <Tab label="Tab1">
      <MetricsComp {...props} />
    </Tab>
    <EventsTab {...props}/>
  </TabbedShowLayout>
</Show>

但我收到以下错误:uncaught at finalize Invariant Violation: EventsTab(...): 必须返回有效的 React 元素(或 null)。您可能返回了未定义、数组或其他一些无效对象。

Admin-on-rest 允许有条件地呈现组件(如 How to access record's internals in Show/Edit/Create )但不允许 Tab。有什么解决方法吗？

Answer 1

我们必须做类似的事情 - 不幸的是，我们无法访问 Show 中的记录，但我们可以访问 TabbedShowLayout。所以我们决定创建一个自定义的 TabbedShowLayout，其中 TabbedShowLayout 的 render() 改变如下:

render() {
    const {
        children,
        contentContainerStyle,
        record,
        resource,
        basePath,
        translate,
        version,
    } = this.props;
    let changedChildren = children;

    if (record.excludeTab) {
        changedChildren = [];

        for (let i=0; i<children.length; i++) {
            if (children[i] instanceof Array) {
                changedChildren.push(children[i]);
            } else if (children[i] instanceof Object 
                       && children[i].props.label !== "TabToExcludeLabel") {
                changedChildren.push(children[i]);
            }
        }

    }
    return (
        <div style={divStyle} key={version}>
            <Tabs
                value={this.state.value}
                onChange={this.handleChange}
                contentContainerStyle={contentContainerStyle}
            >
                {React.Children.map(
                    changedChildren,
                    (tab, index) => ....
    )
 }