在 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(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Admin-on-rest 允许有条件地呈现组件（如），但不允许 Tab。有什么解决方法吗？

Answer 1

我不确定，我可能是冒昧的，但你的组件 EventsTab 基本上 return 一个布尔值而不是一个有效的反应组件。以下是您要找的吗？

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

Answer 2

我们不得不做类似的事情 - 不幸的是，我们无法访问 Show 中的记录，但我们可以访问 TabbedShowLayout 中的记录。所以我们决定创建一个自定义的 TabbbedShowLayout，其中 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) => ....
    )
 }

在 TabbedShowLayout/TabbedForm 中有条件 Tab/FormTab 渲染

Conditional Tab/FormTab rendering in TabbedShowLayout/TabbedForm

admin-on-rest