ShowController с TabbedShowLayout - PullRequest
Новая
       4

ShowController с TabbedShowLayout

0 голосов
/ 09 ноября 2018

Я на самом деле создаю панель мониторинга с использованием React-Admin, и я обнаружил <ShowController>, который разрешает использовать компоненты Material-UI в представлении Show.

Но моя проблема здесь, я использовал <TabbedShowLayout>, и он не очень хорошо работает. Позвольте мне объяснить: 

<ShowController {...props}>
    {controllerProps =>
      <ShowView {...props} {...controllerProps}>
        <TabbedShowLayout {...controllerProps}>
          <Tab icon={<AssignIcon />}>
            <div>
              <TextField source="id" />
            </div>
          </Tab>
        </TabbedShowLayout>
      </ShowView>
    }
</ShowController>

Вот мой действительный код, и он не отображает ничего, кроме вкладки со значком. Но если я удаляю компонент <div>, он работает.

Я хотел бы знать, если кто-то когда-либо делает это и заставляет это работать.

Спасибо заранее

1 Ответ

0 голосов
/ 12 ноября 2018

Причина в том, что наследование свойств не является "нативным", вы должны сделать это вручную. response-admin делает это в каждом компоненте.

Когда вы вставляете элемент div в форму или макет реагирующего администратора, вы нарушаете это наследование между Tab и TextField. div получает props от родителя Tab, но не пересылает их на TextField.

Одним из решений является создание специальной обертки. В вашем случае: 

<ShowController {...props}>
    {controllerProps =>
      <ShowView {...props} {...controllerProps}>
        <TabbedShowLayout {...controllerProps}>
          <Tab icon={<AssignIcon />}>
            <CustomDiv>
              <TextField source="id" />
            </CusomDiv>
          </Tab>
        </TabbedShowLayout>
      </ShowView>
    }
</ShowController>

С 

const CustomDiv = ({children, ...props}) => (
    <div>
        {
            React.Children.map(children, child => React.cloneElement(child, {...props, ...child.props}))
        }
    </div>
);
...