Ant-design: Список компонентов `antd`, которые не могут работать с HOC

Это сложно, поскольку некоторые компоненты используют key как часть API, мы не сможем исправить это, пока не переименуем все имена API. например

key => id
expandedKeys => expandedIds
selectedKeys => selectedIds
....

Это будет критическое изменение, но такое исправить с помощью

ТАК, как вы думаете, стоит ли это делать?

Не думаю, что это хорошая идея.

Не фанат решения codemod.
Это просто моя точка зрения, но я считаю, что, к сожалению, для большинства людей это скорее отталкивает, чем приветствуется.

Встраивание компонентов в пользовательские компоненты - обычная практика в React.

Пожалуйста, исправьте это, и вы увидите, как быстро растет число пользователей муравьиного дизайна.

Ant Design действительно привлекателен и является первой библиотекой, которая заставляет меня отказаться от react-bootstrap.

@MacKentoch

Это сложно, поскольку некоторые компоненты используют ключ как часть API, мы не сможем исправить это, пока не переименуем все имена API.

@ afc163, если мы не можем переименовать эти API, мы не сможем решить эту проблему. Но мы можем предложить обходной путь, см .: https://github.com/react-component/collapse/issues/73#issuecomment -323626120

Как вы думаете, стоит ли добавить это в документацию?

@benjycui, я понимаю.

Во всяком случае, это все-таки не блокировка.

Спасибо, что нашли время ответить.

@benjycui Я исследовал предложенный вами обходной путь, но я думаю, что это неправильное решение. Обычно, когда вы обертываете компонент, вы также хотите иметь какое-то внутреннее состояние. С предлагаемым решением это невозможно.
Также я думаю, что это не маленькая проблема. Неспособность изолировать общие компоненты означает многократное повторение одного и того же кода внутри приложения. Если приложение большое, я бы решил вообще не использовать antd. Считайте это конструктивным критиком.
Спасибо за вашу работу!

Я согласен сказать, что это немалая проблема, и этого я не ожидал, когда начал использовать библиотеку Ant Design. Хорошая практика использования настраиваемых компонентов используется во всех проектах React. Лично мне очень нравится Ant Design, но для некоторых это может быть решающим фактором. Очень хотелось бы, чтобы это улучшилось в грядущей версии Ant Design v3.

Найдите решение этой проблемы в v3.

Может быть решено после выпуска этого пакета (возможно).

https://github.com/ant-design/ant-design/issues/5540

просто столкнулся с этой попыткой (извините, если это неправильно) создать панель навигации с использованием меню и вложением тегов React Router <Link /> в меню с помощью <Icon /> .

Есть ли более предпочтительное решение?

ИМХО, эта ветка должна быть в официальных документах, потому что эта проблема, скорее всего, помешает многим пользователям.
В документации также следует упомянуть https://github.com/react-component/collapse/issues/73#issuecomment -323626120 в качестве альтернативы, когда состояние не требуется.

Я определенно был бы признателен за упоминание об этом в документации! Я пытался сделать что-то подобное и потратил довольно много времени, потому что это не сработало.

<Collapse>
   <MyCollapseItem />
   <MyCollapseItem2 />
</Collapse>

Где MyCollapseItem & MyCollapseItem2 рендерит Collapse.Panel .

Кроме того, теперь, когда react16 позволяет возвращать массивы компонентов из рендера, возможность делать это будет особенно полезна. В противном случае предотвратить дублирование кода сложно.

Есть обновления по этому поводу?

На самом деле это серьезная проблема для нас. Я бы проголосовал за критическое изменение переименования, поскольку я не могу придумать обходного пути.

То же самое - мне это нужно для Tabs.TabPane и Menu.MenuItem .

Я нашел обходной путь, в основном вы можете передать остальные реквизиты с помощью из обернутого компонента.

Если вы используете с React.Children.map(children, (child, index) => { ... }) обходной путь не работает, по крайней мере, для меня. В конце концов, свойство ключа получает значение типа mykey/.0 которым я не могу работать. Я бы также проголосовал за изменение названия свойств.

эта проблема может оттолкнуть меня от antd ... Или, по крайней мере, заставить меня найти замену этим компонентам. Это действительно ограничивает вашу способность создавать повторно используемые компоненты.

Для тех, кто пытается использовать React Router в меню, у элемента @yunshuipiao было успешное решение, которое сработало для меня в # 6576

Еще одна небольшая проблема: обертывание Menu.Item также предотвращает появление подменю, когда выбран один из его дочерних элементов, по крайней мере, в вертикальном режиме. Соответствующие строки:

https://github.com/react-component/menu/blob/018d6f84d622ee140d9695ba57e7a773cf368efa/src/util.js#L40
https://github.com/react-component/menu/blob/018d6f84d622ee140d9695ba57e7a773cf368efa/src/SubMenu.jsx#L314

Подумал, что я задокументирую это для тех, кто пытается заставить Collapse работать с пользовательским компонентом: аналогично тому, что упомянул @jfreixa , просто передайте все реквизиты, данные пользовательскому компоненту, в Panel, например

<Collapse>
  <Custom/>
  <Custom/>
</Collapse>


Custom.render() {
  return (
    <Panel {...this.props}>
      <div>My custom stuff here</div>
    </Panel>
  )
}

Та же проблема, что и @ncknuna.

Menu.Item не выбирается при обертке. Есть ли обходной путь?

@Nomeyho Я закончил реконструкцию логики, которая определяет, будет ли добавлен класс ant-menu-submenu-selected путем копирования / вставки соответствующих методов и комментирования исходной проверки, а затем передачи класса как className в мою оболочку:

function loopMenuItemRecusively (children: Array<any>, keys: Array<string>, ret: { find: boolean }) {
  if (!children || ret.find) {
    return
  }
  React.Children.forEach(children, (c: any) => {
    if (ret.find) {
      return
    }
    if (c) {
      const construt = c.type
      // Original check that caused problems. I'm not concerned about omitting it
      // because I don't plan on putting a bunch of weird, large stuff in my menus...
      // if (!construt || !(construt.isSubMenu || construt.isMenuItem || construt.isMenuItemGroup)) {
      //   return;
      // }
      if (keys.indexOf(c.key) !== -1) {
        ret.find = true
      } else if (c.props && c.props.children) {
        loopMenuItemRecusively(c.props.children, keys, ret)
      }
    }
  })
}

function isChildrenSelected (children: Array<any>, selectedKeys: Array<string>) {
  const ret = { find: false }
  loopMenuItemRecusively(children, selectedKeys, ret)
  return ret.find
}

// Omitting other custom code below...
export const SubMenu = ({ children, className, selectedKeys, title, ...rest }: any) => {
  const isSelected = isChildrenSelected(children, selectedKeys)
  className = [
    className,
    isSelected ? 'ant-menu-submenu-selected' : ''
  ].filter(className => classname).join(' ')
  return (
    <SubMenu title={title} className={className} selectedKeys={selectedKeys} {...rest}>
      {children}
    </SubMenu>
  )
}

Есть ли что-нибудь исправить?

Я согласен с @ChuckJonas

эта проблема может оттолкнуть меня от antd ... Или, по крайней мере, заставить меня найти замену этим компонентам. Это действительно ограничивает вашу способность создавать повторно используемые компоненты.

Мне нужно использовать Menu SubMenu и Menu.items следующим образом:
Почему? потому что я могу использовать свои элементы «CustomSubMenu» на других страницах ... это важная часть «повторно используемых» компонентов.

_MainFile.js_

Import CustomSubMenu from './OtherFile.js';

<Menu>
    <CustomSubMenu />
    <CustomSubMenu2 />
    <CustomSubMenu3 />
</Menu>

и OtherFile.js вот так:

render(){
 return(
     <SubMenu>
           <SubMenu.item />
           <SubMenu.item2 />
            etc...etc...
     </SubMenu>
 );
}

Временное решение (отредактировано для простоты) для подменю:

const SubMenuArray = ({ ...props }) =>
  [1, 2].map(i => (
    <Menu.SubMenu {...props} eventKey={`item_${i}`} subMenuKey={`${i}-menu-`} />
  ));

При работе с массивами:

• передать реквизит
• добавьте eventKey и subMenuKey , которые должны быть уникальными

Вероятно, лучший подход:

const SubMenuWrapper = ({ children, ...props }) =>
  React.Children.map(children, (child, i) =>
    React.cloneElement(child, {
      ...props,
      eventKey: `item_${i}`,
      subMenuKey: `${i}-menu-`
    })
  );

Применение:

      <Menu>
        <SubMenuWrapper>
          <CustomSubMenu title={"one"}/>
          <CustomSubMenu title={"two"}/>
        </SubMenuWrapper>
      </Menu>

Опять же, вы, вероятно, не хотите использовать индекс в массиве, поэтому не используйте его в производстве, но идея надежна.

• 1 для возможности встраивать компоненты antd в пользовательские компоненты. Для нас это решителен.

Думаю, у нас есть способ убрать зависимость ключа. Возьмем, к примеру, Menu, мы можем ввести опору itemKey а затем использовать context для реализации Menu. Для обеспечения совместимости Меню по-прежнему проходит по дочерним элементам и меняет key на itemKey если оно есть. В то же время мы также можем сохранить семантику реквизита, например selectedKeys .

@yesmeck, честно говоря, это занимает некоторое время, поскольку я не использую ant design ( но планирую использовать его для важного приложения в течение этой недели ).

Насколько я понимаю, вы могли бы воспользоваться реакцией на новый context API качестве обходного пути?

Это отличные новости

Да, нам нужно context вместо cloneElement для решения проблемы.

Я думаю, что решение не в том, чтобы использовать «React.Children.forEach» и «React.cloneElement» для передачи реквизитов и установки новых реквизитов, используйте функцию, например, для custom:

<Select>
  {({ onSelect }) => (
    <div>
      <Option onClick={onSelect} key="0">option1</Option>
      <Option onClick={onSelect} key="1">option2</Option>
    </div>
  )
</Select>

и источник antd select также используют реквизиты дочерних функций вместо "React.Children.forEach" и "React.cloneElement"

Простите, если это глупый вопрос, но я все еще новичок в React и Ant Design.
Означает ли это, что практически мы не можем использовать меню дизайна Ant внутри SPA, подключенного к react-redux?
Если да, то как можно написать относительно сложный SPA с Ant Design? Есть ли обходной путь?

Есть новости по этому поводу?

есть ли обновления по этой проблеме? Пункт меню ведет себя странно с HOC.

Привет ! То же самое и здесь, мне действительно интересно иметь возможность настраивать такие компоненты.
На самом деле проблема с пользовательским Select.Option

Никакой обходной путь, предложенный в этой теме, не помог мне заставить его работать, у меня есть рабочий выбор с пустыми параметрами ....

import React from 'react';
import PropTypes from 'prop-types';
import { Select } from 'antd';

const { Option } = Select;

const PictureOption = ({ label, value, pictureId, ...props }) => (
    <Option label={label} value={value} className="select-item" {...props}>
        <div className="select-item__thumbnail">
            <img src={pictureId} alt="item-img" />
        </div>
        <div className="select-item__name">{label}</div>
    </Option>
);

PictureOption.propTypes = {
    label: PropTypes.string.isRequired,
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
    pictureId: PropTypes.string.isRequired,
};

export default PictureOption;

Я начал использовать CASL для визуализации элементов пользовательского интерфейса в зависимости от разрешения пользователя. Однако я столкнулся с проблемой, что SubMenus не отображается из-за сбоя вызова функции isRootMenu из-за того, что реквизиты неправильно распространяются на дочерние элементы.

В качестве обходного пути я определил SubMenus как константы и передал свойства «вручную»:
`` ''
render () {

// ### Administration Menu ###
const AdminMenu = ({ ...props }) => {
  return (
    <Can I="access" on="admin-content">
      <Menu.Divider {...props} />
      <Menu.SubMenu
        {...props}
        title={
          // FIXME: Icon is not rendered... :-/
          <span>
            <Icon type="tools" />
            <span>Administration</span>
          </span>
        }
        // title={<span>Administration</span>}
        key="admin">
        <Menu.Item key="users" tabIndex={0}>
          <Icon type="android" />
          <span>User Administration</span>
        </Menu.Item>
        <Menu.Item key="permissions" tabIndex={0}>
          <Icon type="lock" />
          <span>Permissions</span>
        </Menu.Item>
      </Menu.SubMenu>
    </Can>
  );
};

return (
  <Layout id="menu-component-layout">
    <Layout.Sider width="300px" collapsible="false" trigger={null}>
      <Menu theme="dark" mode="inline" defaultSelectedKeys={['user']} defaultOpenKeys={['user', 'config', 'admin']}>
        <AdminMenu />
      </Menu>
    </Layout.Sider>
    <Layout.Content id="menu-component-content">
      <h3>Page containing a side menu</h3>
    </Layout.Content>
  </Layout>
);

}
`` ''

Это не очень удобное решение, но пока оно работает. Однако у меня все еще есть проблема, что заголовок SubMenu, который включает значок, не отображается правильно. Значок отсутствует.

Кто-нибудь знает, как это исправить?

Я создал витрину здесь: https://github.com/gibelium/meteor-react-antd-casl

GitHub

гибелий / метеор-реакция-antd-casl

Демонстрация использования библиотеки авторизации CASL в среде meteor / react с использованием библиотеки пользовательского интерфейса ant-design - gibelium / meteor-react-antd-casl

@gibelium Я думаю, что рендеринг иконок заслуживает отдельной проблемы. Я клонировал ваше репо и попытался заменить значок на кнопку-призрак, и контур кнопки виден, но значок также не отображается внутри / на кнопке ...

@gotjoshua, создадите ли вы этот специальный выпуск?

Установка элементов расширенного меню по умолчанию также не работает. Моя реализация обходного пути игнорирует свойство defaultOpenKeys меню.

Есть идеи, как это решить?

Эта проблема действительно должна быть упомянута в документации, я потратил полный рабочий день, исследуя эту ошибку, только чтобы понять, что эта библиотека для меня непригодна. Пожалуйста, поставьте предупреждение, чтобы другим разработчикам не приходилось тратить так много времени на выяснение, что вы использовали антишаблон, передавая ключи React, и теперь вы очень уязвимы для стольких HOC или декораторов, доступных сообществу.
Это действительно обидно. Надеюсь, вы исправите это в следующей основной версии.

есть ли обновления по этой проблеме? Установить меню по умолчаниюOpenKeys не работает

В целом то, что должно быть очень быстро рассмотрено как высокий приоритет. 🔥

У меня есть аналогичный вариант использования, который я (вероятно) не могу реализовать.
Я хотел бы создать компонент, связанный с redux, который отображает Select с параметрами на основе данных в хранилище redux. Поскольку я не хочу везде «копировать-вставить» один и тот же код, я хотел бы использовать этот тип компонента внутри Form.getFieldDecorator , но из-за использования connect HOC я не могу это сделать Это.

РЕДАКТИРОВАТЬ: Я нашел решение для своего варианта использования. Мне удалось создать такой компонент, как описано выше, с параметром forwardRef например:
connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(Component);
Это решение специфично для connect HOC, но вы сможете создать подобное решение с помощью React.forwardRef .

В дополнение к предыдущим комментариям - да, я также думаю, что это можно рассматривать как высокий приоритет. После того, как я успешно решил одну из своих проблем (как я описал выше), теперь мне нужно будет создать компонент Tabs.TabPane обернутый моим пользовательским компонентом. У меня очень распространенный вариант использования -> компонент оболочки используется для проверки разрешений, поэтому, если условия выполняются, дочерний компонент отображается, в противном случае - нет.

Есть ли простой и рабочий способ решения этой проблемы?

какие-нибудь обновления по этому поводу, пожалуйста?

Я нашел обходной путь, в основном вы можете передать остальные реквизиты с помощью из обернутого компонента.

Это показывает предупреждения консоли. Как решить эту проблему?
Вместо этого index.js:1437 Warning: React does not recognize the staticContext prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase staticcontext`. Если вы случайно передали его из родительского компонента, удалите его из элемента DOM.

index.js: 1437 Предупреждение: недопустимое значение для prop dispatch on

та же проблема ... Я хочу создать компонент разрешения как HOC для обертывания Menu.Item, но antd не позволяет этого ... грустно

Я потратил некоторое время на эту проблему ...

и это выполнимо 🎉, вам просто нужно передать реквизит для отдыха, т.е. Collapse.Panel (проверьте исходный код rc-панели, чтобы понять его)

export const CustomPanel: React.FC = ({ header, children, ...props }) => {
  // do whatever you like

  return <Collapse.Panel header={header} {...props}>
    {children}
  </Collapse.Panel>
};

а затем используйте это так:

<Collapse>
    <CustomPanel key="first" header="Header 1">Body</CustomPanel>
    <CustomPanel key="second" header="Header 2">Body</CustomPanel>
</Collapse>

Было бы здорово увидеть это решение в версии 4.0!

Это абсолютно высокий приоритет.
Буквально делает эти компоненты непригодными для использования, когда требуются особые действия (иногда даже простые, например авторизация).
Например, я пытаюсь создать динамически загружаемое меню, поэтому я буквально показываю отключенный Menu.Item со счетчиком в качестве его имени, пока не будут получены данные.
Это далеко не оптимально.

Я потратил некоторое время на эту проблему ...

и это выполнимо 🎉, вам просто нужно передать реквизит для отдыха, т.е. Collapse.Panel (проверьте исходный код rc-панели, чтобы понять его)

Хотя это отличное решение (правда! Я использую его в своих проектах), вы теряете некоторые функциональные возможности.
Т.е. если ваш <SubMenu> не является прямым потомком <Menu> , defaultOpenKeys работать не будет. 😞

Только что столкнулся с этой проблемой, к сведению.

Определенно нуждается в подтверждении в документации. Очень неприятно столкнуться с этой проблемой (среди множества других незначительных), которые заставляют меня серьезно пересмотреть использование AntDesign в моих проектах.

Не могу поверить, что это все еще не исправлено.

Это действительно нужно исправить. Большинство разработчиков не используют компоненты прямо из коробки. Это означает, что мы могли бы захотеть интегрировать больше функций, которые нельзя было бы добавить иначе через предоставленный API. Я бы не назвал HOC необычным вариантом использования или вариантом использования с низким приоритетом. Это фундаментально для композиционной природы React.

Пожалуйста, исправьте это, и пока он исправляется, добавьте информацию, а также обходные пути, которые люди нашли здесь, в свои официальные документы.

Пожалуйста, исправьте это, и пока он исправляется, добавьте информацию, а также обходные пути, которые люди нашли здесь, в свои официальные документы.

Сопровождающие открыты для PR, вы также можете отправить PR для обновления документации, если хотите и у вас есть время для этого.

@ afc163

Я потратил некоторое время на эту проблему ...

и это выполнимо, вам просто нужно передать реквизит для отдыха, т.е. Collapse.Panel (проверьте исходный код rc-панели, чтобы понять его)

export const CustomPanel: React.FC = ({ header, children, ...props }) => {
  // do whatever you like

  return <Collapse.Panel header={header} {...props}>
    {children}
  </Collapse.Panel>
};

а затем используйте это так:

<Collapse>
    <CustomPanel key="first" header="Header 1">Body</CustomPanel>
    <CustomPanel key="second" header="Header 2">Body</CustomPanel>
</Collapse>

Может кто-нибудь объяснить, что происходит ниже. Также пытаюсь обернуть Panel внутри компонента.

Если я использую этот код:

 <PersonalInfoPanel
                header="header"
                key={"personalInfo" + i}
                extra={genExtra()}
            />

внутри PersonalInfoPanel :

function PersonalInfoPanel(props, ref) {
    return (
        <Panel header={props.header} key={props.key} extra={props.extra}>
...

Не работает.

Но как только я воспользуюсь этим:

function PersonalInfoPanel(props, ref) {
    return (
        <Panel {...props}>
...

он начинает работать.
Может кто-нибудь объяснить почему?

 <Panel {...props}>
...

он начинает работать.

Может кто-нибудь объяснить почему?

Насколько я понимаю, родительскому Collapse нужно будет установить реквизиты, отличные от заголовка, ключа и дополнительных (из вашего неработающего примера). Эти свойства из родительского Collapse необходимо явно поместить в компонент Panel внутри вашего пользовательского компонента.

Я думаю, вы могли бы использовать React Inspector, чтобы изучить все возможные реквизиты, которые будут меняться, и передать их один за другим, но синтаксис ... props гарантирует, что все, что родитель хочет добавить к своей дочерней панели, будет прикреплено ( включая, но не ограничиваясь, те, которые вам явно необходимо установить)

Эту проблему нужно исправить.
МНОГИЕ (или… почти) разработчики хотят использовать библиотеку для пользовательских компонентов.

Пример)
Этот код не работает. Потому что меню и пункт меню требуют непрозрачных опор.

      <Menu>
        { menus.map((item) => {
          if (item.to) {
            return <Menu.Item title={item.title} />;
          }
          // some codes...
          return null;
        })}
      </Menu>

@moonjoungyoung @adamerose
вы читали ветку?
Вы должны передать подпорки внутреннему компоненту antd, чтобы он заработал.

Вот что сработало для меня, чтобы получить пользовательские компоненты + условный рендеринг для react-router NavLinks внутри antd Menu , правда, хотя это требует исправления - я потратил впустую много времени прежде, чем найти эту ветку.

_edit- Неважно, selectedKeys не работает должным образом_

const Nav = withRouter(() => {
  const auth = store.isAuthenticated;

  return (
    <Menu selectedKeys={[history.location.pathname]} mode="horizontal">
      <NavItem id="/">Home</NavItem>
      {auth && <NavItem id="/create">Create Post</NavItem>}
      {!auth && <NavItem id="/sign-in">Sign In</NavItem>}
      {!auth && <NavItem id="/register">Register</NavItem>}
    </Menu>
  );
});

const NavItem = ({ ...props }) => (
  <Menu.Item {...props} key={props.id}>
    <NavLink exact to={props.id}>
      {props.children}
    </NavLink>
  </Menu.Item>
);

@moonjoungyoung @adamerose
вы читали ветку?
Вы должны передать подпорки внутреннему компоненту antd, чтобы он заработал.

Можете ли вы взглянуть на мой пример выше? Я думал, что применил все решения в этой ветке, но они все еще не работают должным образом. Я передаю реквизиты и раскладываю их по Menu.Item но он по-прежнему не выделяется, когда активен, а дерево компонентов выглядит следующим образом

Я потратил некоторое время на эту проблему ...

и это выполнимо, вам просто нужно передать реквизит для отдыха, т.е. Collapse.Panel (проверьте исходный код rc-панели, чтобы понять его)

В моем случае я должен поставить заголовок = {Calculated_header} после "{... props}". Если я этого не сделаю, заголовок панели не будет отображаться. Я думаю, что "{... props}", которое появляется позже в последовательности, перезаписывает информацию "заголовка". Когда я помещаю "{... props}" в начало, это работает. В этом случае я думаю, что «заголовок», который появляется позже, перезаписывает «заголовок» в реквизитах.

Моя адаптация к ответу @ marcin-piela выглядит следующим образом:

export const CustomPanel: React.FC = ({ headerinfo, children, ...props }) => { // do whatever you like const calculated_header = {() => headerinfo.someinformation } return <Collapse.Panel {...props} header={calculated_header} > {children} </Collapse.Panel> };