Ant-design: Uma lista de componentes do `antd` que não funcionam com o HOC

É difícil, pois alguns componentes usam key como parte da API, não podemos corrigir isso até renomear todos os nomes da API. por exemplo

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

Será uma alteração significativa, mas esse tipo de alteração pode ser resolvida pelo antd-codemod .

ASSIM, você acha que vale a pena fazer isso?

Não acho que seja uma boa ideia.

Não sou fã da solução do codemod.
Apenas meu ponto de vista, mas, acredito que, infelizmente, para a maioria das pessoas, é mais repulsivo do que bem-vindo.

Incorporar componentes em componentes personalizados é uma prática comum no React.

Por favor, corrija e veja o rápido aumento da adoção do ant design sem dúvidas.

Ant Design é realmente atraente e é a primeira biblioteca que me faz querer sair do react-bootstrap.

@MacKentoch

É difícil, pois alguns componentes usam a chave como parte da API, não podemos corrigir isso até renomearmos todos os nomes da API.

@ afc163 se não conseguirmos renomear essas APIs, não poderemos resolver esse problema. Mas podemos fornecer uma solução alternativa, consulte: https://github.com/react-component/collapse/issues/73#issuecomment -323626120

Você acha que devemos adicionar isso à documentação?

@benjycui eu entendo.

De qualquer forma, afinal não está bloqueando.

Obrigado por responder.

@benjycui Eu estava investigando a solução alternativa que você propôs, mas acho que não é uma solução adequada. Normalmente, quando você envolve um componente, você também deseja ter algum estado interno. Com a solução proposta isso não é possível.
Também acho que isso não é um pequeno problema. Não ser capaz de isolar componentes comuns significa ter o mesmo código repetido muitas vezes dentro de um aplicativo. Se a aplicação for grande, eu consideraria não adotar o antd. Por favor, considere isso como uma crítica construtiva.
Obrigado pelo seu trabalho!

Concordo em dizer que este não é um problema pequeno e é algo que eu não esperava quando comecei a usar a biblioteca Ant Design, a boa prática de componentes personalizados são usados ​​em todos os projetos React. Pessoalmente, eu realmente gosto do Ant Design, mas para alguns, isso pode ser um obstáculo. Adoraria ver isso sendo melhorado no próximo Ant Design v3.

Encontre uma solução para isso na v3.

Pode ser resolvido após o lançamento deste pacote (talvez).

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

acabei de tentar (desculpe se isso está errado) para criar uma barra de navegação usando o menu e aninhando as tags React Router <Link /> no Menu com <Icon /> .

Existe uma solução mais preferida?

IMHO, este tópico deve estar na documentação oficial, porque é provável que esse problema seja um problema para muitos usuários.
Os documentos também devem mencionar https://github.com/react-component/collapse/issues/73#issuecomment -323626120 como uma alternativa quando nenhum estado for necessário.

Eu definitivamente apreciaria mencionar isso na documentação! Eu estava tentando fazer algo assim e perdi muito tempo porque não funciona.

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

Onde MyCollapseItem & MyCollapseItem2 renderizam Collapse.Panel .

Além disso, agora que react16 permite que você retorne matrizes de componentes da renderização, ser capaz de fazer isso seria especialmente útil. Caso contrário, evitar códigos duplicados é um desafio.

Alguma atualização sobre isso?

Este é realmente um grande problema para nós. Eu votaria pela mudança significativa de renomeação, já que não há solução alternativa que eu possa imaginar.

O mesmo aqui - eu preciso disso para Tabs.TabPane e Menu.MenuItem .

Eu encontrei uma solução alternativa, basicamente, você pode passar o resto dos adereços com do componente empacotado.

Se você usar com React.Children.map(children, (child, index) => { ... }) a solução alternativa não funciona, pelo menos para mim. No final, a propriedade da chave obtém um valor como mykey/.0 que não é o que eu posso trabalhar. Eu também votaria por uma mudança de nome nas propriedades.

esse problema pode realmente me afastar do antd ... Ou, pelo menos, fazer com que eu encontre um substituto para esses componentes. Isso realmente limita sua capacidade de criar componentes reutilizáveis.

Para qualquer um que esteja tentando utilizar o React Router dentro de um Menu.Item @yunshuipiao teve uma solução de sucesso que funcionou para mim no # 6576

Outro pequeno problema: agrupar Menu.Item também evita que o Submenu apareça selecionado quando um de seus itens filho é selecionado, pelo menos no modo vertical. Linhas relevantes:

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

Pensei em documentar isso para aqueles que estão tentando fazer o Collapse funcionar com um componente personalizado: Da mesma forma que @jfreixa mencionou, basta passar todos os adereços fornecidos ao componente personalizado para o Painel, por exemplo

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


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

Mesmo problema que @ncknuna.

Menu.Item não são selecionados quando agrupados. Existe uma solução alternativa?

@Nomeyho , acabei reconstruindo a lógica que determina se a classe ant-menu-submenu-selected é adicionada copiando / colando os métodos relevantes e comentando a verificação original e, em seguida, passando a classe como className em meu wrapper:

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>
  )
}

Existe alguma solução para isso?

Concordo com @ChuckJonas

esse problema pode realmente me afastar do antd ... Ou, pelo menos, fazer com que eu encontre um substituto para esses componentes. Isso realmente limita sua capacidade de criar componentes reutilizáveis.

Preciso usar Menu SubMenu e Menu.items como este:
Por quê? porque posso usar meus elementos "CustomSubMenu" em outras páginas ... esta é uma parte importante dos componentes "reutilizáveis".

_MainFile.js_

Import CustomSubMenu from './OtherFile.js';

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

e OtherFile.js como este:

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

Solução temporária (editada para simplificar) para submenus:

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

Ao lidar com matrizes:

• passar adereços
• adicione eventKey e subMenuKey , que deve ser único

Uma abordagem melhor provavelmente seria:

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

Uso:

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

Novamente, você provavelmente não deseja usar o índice no array, portanto, não o use na produção, mas a ideia é sólida.

• 1 para capacidade de incorporar componentes antd em componentes personalizados. Isso é tudo ou nada para nós

Acho que temos uma maneira de remover a dependência da chave. Tome o Menu como exemplo, podemos introduzir um itemKey prop e então usar o context para implementar o Menu. Para manter a compatibilidade, o Menu ainda percorre os filhos e altera o key para itemKey se apresentar. Ao mesmo tempo, também podemos manter a semântica de props como selectedKeys .

@yesmeck para ser honesto, ant design ( mas planejo usá-lo para uma aplicação importante nesta semana ).

Pelo que entendi, você poderia se beneficiar com a reação de novo context API como solução alternativa?

Essa é uma ótima notícia

Sim, precisamos context vez de cloneElement para resolver o problema.

Acho que uma solução não é usar "React.Children.forEach" e "React.cloneElement" para passar adereços e definir novos adereços, usar uma função, por exemplo para customizar:

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

e antd select source também usam adereços de filhos de função em vez de "React.Children.forEach" e "React.cloneElement"

Desculpe-me se esta é uma pergunta estúpida, mas ainda sou relativamente novo no React e no Ant Design.
Isso significa que praticamente não podemos usar os menus de design do Ant dentro de um SPA conectado a react-redux?
Se sim, como você pode escrever um SPA relativamente complexo com o Ant Design? Existe uma solução alternativa?

alguma atualização disso?

existe alguma atualização sobre este problema? O item de menu está se comportando de forma estranha com HOC.

Oi ! Mesmo aqui, estou realmente interessado em poder personalizar esse tipo de componente.
Na verdade, tendo problemas com um Select.Option

Nenhuma solução alternativa proposta neste tópico me ajudou a fazer funcionar, eu tenho uma seleção de trabalho com opções vazias ....

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;

Comecei a usar CASL para renderizar elementos de interface do usuário com base na permissão do usuário. No entanto, tive o problema de que os SubMenus não são renderizados porque a chamada para a função isRootMenu falha devido ao fato de que os adereços não são propagados corretamente para os elementos filhos.

Como solução alternativa, defini o SubMenus como constantes e passei os acessórios 'manualmente':
`` ``
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>
);

}
`` ``

Esta solução não é muito útil, mas funciona por enquanto. No entanto, ainda tenho o problema de o título do SubMenu que inclui um ícone não ser renderizado corretamente. O ícone está faltando.

Alguém tem ideia de como consertar isso?

Criei uma vitrine aqui: https://github.com/gibelium/meteor-react-antd-casl

GitHub

gibelium / meteoro-react-antd-casl

Vitrine para o uso da biblioteca de autorização CASL em um ambiente de meteoro / react usando a biblioteca de IU ant-design - gibelium / meteoro-react-antd-casl

@gibelium Acho que a renderização de ícones merece seu próprio problema, na verdade. Clonei seu repo e tentei substituir o ícone por um botão fantasma e o contorno do botão está visível, mas o ícone também não renderiza no botão ...

@gotjoshua , você criará essa edição dedicada?

Definir os itens de menu expandidos padrão também não funciona. Minha implementação de solução alternativa ignora a propriedade defaultOpenKeys de Menu.

Alguma ideia de como resolver isso?

Este problema realmente deveria ser mencionado na documentação, eu perdi um dia inteiro de trabalho pesquisando esse bug apenas para entender que esta biblioteca é inutilizável para mim. Por favor, coloque um aviso para que outros desenvolvedores não tenham que perder muito tempo descobrindo que você usou um antipadrão, retransmitindo em chaves React, e agora você está muito frágil para tantos HOC ou decoradores disponíveis para a comunidade.
Isso é realmente uma pena. Espero que você conserte em sua próxima versão principal.

existe alguma atualização sobre este problema? Definir menu defaultOpenKeys não funcionando

Totalmente algo que deveria ser considerado muito rápido como de alta prioridade. 🔥

Tenho casos de uso semelhantes que (provavelmente) não sou capaz de implementar.
Eu gostaria de criar um componente conectado redux que renderiza Select com opções baseadas em dados na loja redux. Como não quero "copiar e colar" o mesmo código em todos os lugares, gostaria de usar esse tipo de componente dentro de Form.getFieldDecorator , mas devido ao uso de connect HOC, não consigo fazer isto.

EDIT: Eu encontrei a solução para meu caso de uso. Consegui criar um componente como descrito acima com forwardRef opção como esta:
connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(Component);
Esta solução é específica para connect HOC, mas você deve ser capaz de criar uma solução semelhante usando React.forwardRef .

Além dos comentários anteriores - sim, também acho que isso poderia ser considerado de alta prioridade. Depois de resolver com sucesso um dos meus problemas (como descrevi acima), agora eu precisaria criar Tabs.TabPane componente envolvido com meu componente personalizado. Eu tenho um caso de uso muito comum -> componente de agrupamento é usado para verificar as permissões, portanto, se as condições forem atendidas, o componente filho será renderizado, caso contrário, não.

Existe alguma solução simples e funcional para isso?

alguma atualização sobre isso, por favor?

Eu encontrei uma solução alternativa, basicamente, você pode passar o resto dos adereços com do componente empacotado.

Isso está mostrando avisos do console. Alguma maneira de resolver isso?
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` em vez disso. Se você o transmitiu acidentalmente de um componente pai, remova-o do elemento DOM.

index.js: 1437 Aviso: valor inválido para a proposta dispatch em

mesmo problema ... Eu quero criar um componente de permissão como HOC para embrulhar Menu.Item, mas antd não permite isso ... triste

Dediquei algum tempo a esse assunto ...

e é factível 🎉, você só precisa passar os apoios de descanso para o ie. Collapse.Panel (verifique o código-fonte do rc-panel para entendê-lo)

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

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

e use-o assim:

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

Seria incrível ver essa solução na versão 4.0!

Isso é absolutamente uma alta prioridade.
Literalmente, torna esses componentes inutilizáveis ​​quando comportamentos especiais são necessários (às vezes até mesmo alguns mais simples, como autorização).
Por exemplo, estou tentando criar um menu carregado dinamicamente, então eu literalmente exibo um Menu.Item desabilitado com um botão giratório como seu nome até que os dados cheguem.
Isso está longe de ser ideal.

Dediquei algum tempo a esse assunto ...

e é factível 🎉, você só precisa passar os apoios de descanso para o ie. Collapse.Panel (verifique o código-fonte do rc-panel para entendê-lo)

Embora seja uma ótima solução (realmente estou usando em meus projetos), você perde algumas funcionalidades.
Ou seja, se seu <SubMenu> não for um filho direto de <Menu> , defaultOpenKeys não funcionará. 😞

Apenas encontrei este problema FYI.

Definitivamente, precisa de reconhecimento na documentação. Sério frustrante encontrar esse problema (entre alguns outros menores) que está me fazendo reconsiderar seriamente o uso do AntDesign em meus projetos.

Eu não posso acreditar que ainda não há solução para isso.

Isso realmente precisa ser consertado. A maioria dos desenvolvedores não usa componentes prontos para uso. Isso significa que podemos querer integrar mais funcionalidades que não podem ser adicionadas por meio da API fornecida. Eu não chamaria HOC de um caso de uso não comum ou de baixa prioridade. É fundamental para a natureza composicional do React.

Por favor, corrija isso e, enquanto está sendo corrigido, adicione as informações, bem como as soluções alternativas que as pessoas encontraram aqui em seus documentos oficiais.

Por favor, corrija isso e, enquanto está sendo corrigido, adicione as informações, bem como as soluções alternativas que as pessoas encontraram aqui em seus documentos oficiais.

Os mantenedores estão abertos para RP, você também pode enviar um RP para uma atualização de documentos se quiser e tiver tempo para fazê-lo.

@ afc163

Dediquei algum tempo a esse assunto ...

e é factível, você só precisa passar os apoios de descanso para o ie. Collapse.Panel (verifique o código-fonte do rc-panel para entendê-lo)

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

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

e use-o assim:

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

Alguém pode explicar o que está acontecendo abaixo. Também tentando envolver Panel dentro de um componente.

Se eu usar este código:

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

dentro de PersonalInfoPanel :

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

Não funciona.

Mas assim que eu usar isso:

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

começa a funcionar.
Alguém pode explicar por quê?

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

começa a funcionar.

Alguém pode explicar por quê?

Pelo que entendi, o colapso pai precisará definir adereços diferentes de cabeçalho, chave e extra (do seu exemplo não funcional). Esses adereços do colapso pai precisam ser colocados explicitamente no componente do painel dentro do seu componente personalizado.

Eu acho que você poderia usar o Inspetor de React para aprender todos os possíveis adereços que irão mudar e passá-los um por um, mas a ... sintaxe dos adereços garante que qualquer coisa que o pai deseja adicionar ao seu painel filho será anexado ( incluindo, mas não se limitando àqueles que você precisa definir explicitamente)

Este problema precisa ser corrigido.
MUITOS (ou .. quase) desenvolvedores desejam usar a biblioteca para customizar componentes.

Exemplo)
Este código não está funcionando. Porque o Menu e o Item do Menu precisam de acessórios opacos.

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

@moonjoungyoung @adamerose
Você leu o tópico ?
Você tem que passar os apoios de descanso para o componente interno da formiga para que funcione.

Aqui está o que funcionou para mim obter componentes personalizados + renderização condicional para react-router NavLinks dentro de um antd Menu , realmente embora isso precise de uma correção - eu perdi muito muito tempo antes de encontrar este tópico.

_edit- Esqueça, as teclas selecionadas não funcionam corretamente_

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
Você leu o tópico ?
Você tem que passar os apoios de descanso para o componente interno da formiga para que funcione.

Você pode dar uma olhada no meu exemplo acima? Eu pensei que apliquei todas as alternativas neste tópico, mas ainda não funciona corretamente. Estou passando os adereços para baixo e espalhando-os no Menu.Item mas ainda não destacará quando ativo, e a árvore de componentes se parece com isto

Dediquei algum tempo a esse assunto ...

e é factível, você só precisa passar os apoios de descanso para o ie. Collapse.Panel (verifique o código-fonte do rc-panel para entendê-lo)

No meu caso, tenho que colocar "header = {Calculator_header}" atrás de "{... props}". Se eu não fizer isso, o cabeçalho do painel não será exibido. Acho que "{... props}", que aparece mais tarde na sequência, substitui as informações do "cabeçalho". Quando coloco "{... adereços}" no início, funciona. Nesse caso, acho que o "cabeçalho" que aparece mais tarde sobrescreve as informações do "cabeçalho" nos adereços.

Minha adaptação para a resposta @marcin-piela é a seguinte:

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> };