Ant-design: Una lista de componentes de `antd` que no pueden funcionar con HOC

Es difícil, porque algunos componentes usan key como parte de la API, no podemos arreglar esto hasta que cambiemos el nombre de todos los nombres de la API. p.ej

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

Será un cambio decisivo, pero antd-codemod puede resolverlo.

Entonces, ¿crees que vale la pena hacerlo?

No creo que sea una buena idea.

No es fanático de la solución Codemod.
Solo mi punto de vista, pero creo que, lamentablemente, para la mayoría de las personas es más repulsivo que bienvenido.

Incrustar componentes en componentes personalizados es una práctica común en React.

Por favor, arréglelo y vea un rápido aumento de la adopción del diseño de hormigas sin duda.

Ant Design es realmente atractivo y es la primera biblioteca que me hace querer dejar react-bootstrap.

@MacKentoch

Es difícil, ya que algunos componentes usan la clave como parte de la API, no podemos solucionar esto hasta que cambiemos el nombre de todos los nombres de la API.

@ afc163 si no podemos cambiar el nombre de esas API, entonces no podemos resolver este problema. Pero podemos proporcionar una solución alternativa, consulte: https://github.com/react-component/collapse/issues/73#issuecomment -323626120

¿Crees que deberíamos agregar esto a la documentación?

@benjycui lo entiendo.

De todos modos, no es un bloqueo después de todo.

Gracias por tomarse el tiempo para responder.

@benjycui Estaba investigando la solución alternativa que propuso, pero creo que no es una solución adecuada. Por lo general, cuando envuelve un componente, también desea tener algún estado interno. Con la solución propuesta esto no es posible.
También creo que esto no es un problema menor. No poder aislar componentes comunes significa tener el mismo código repetido muchas veces dentro de una aplicación. Si la aplicación es grande, consideraría no adoptar antd en absoluto. Considere esto como una crítica constructiva.
¡Gracias por tu trabajo!

Estuve de acuerdo en decir que este no es un problema pequeño y es algo que no esperaba cuando comencé a usar la biblioteca Ant Design, la buena práctica de componentes personalizados se usa en todos los proyectos de React. Personalmente, me gusta mucho Ant Design, pero para algunos, esto podría ser un factor decisivo. Realmente me encantaría ver que esto se mejore en el próximo Ant Design v3.

Encuentre una solución para esto en v3.

Puede resolverse después del lanzamiento de este paquete (tal vez).

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

simplemente me encontré con esto intentando (lo siento si esto es incorrecto) para crear una barra de navegación usando el menú y anidando las etiquetas React Router <Link /> en el Menú con <Icon /> .

¿Existe una solución más preferida?

En mi humilde opinión, este hilo debería estar en los documentos oficiales, porque es probable que este problema sea un factor decisivo para muchos usuarios.
Los documentos también deben mencionar https://github.com/react-component/collapse/issues/73#issuecomment -323626120 como alternativa cuando no se necesita un estado.

¡Definitivamente hubiera apreciado mencionar esto en la documentación! Estaba tratando de hacer algo como esto y perdí bastante tiempo porque no funciona.

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

Donde MyCollapseItem & MyCollapseItem2 renderizan el Collapse.Panel .

Además, ahora que react16 te permite devolver matrices de componentes desde render, ser capaz de hacer esto sería especialmente útil. De lo contrario, evitar el código duplicado es un desafío.

¿Alguna actualización sobre esto?

En realidad, este es un problema importante para nosotros. Votaría por el cambio radical de cambio de nombre, ya que no se me ocurre ninguna solución.

Lo mismo aquí: lo necesito para Tabs.TabPane y Menu.MenuItem .

Encontré una solución, básicamente puedes pasar el resto de los accesorios con del componente envuelto.

Si usa con React.Children.map(children, (child, index) => { ... }) la solución no funciona, al menos para mí. Al final, la propiedad clave obtiene un valor como mykey/.0 que no es lo que puedo trabajar. También votaría por un cambio de nombre en las propiedades.

este problema puede en realidad alejarme de antd ... O al menos hacer que encuentre un reemplazo para estos componentes. Realmente limita su capacidad para crear componentes reutilizables.

Para cualquiera que intente utilizar React Router dentro de un menú, el artículo @yunshuipiao tuvo una solución exitosa que funcionó para mí en # 6576

Otro pequeño problema: Menú envolvente. El elemento también evita que el Submenú aparezca seleccionado cuando se selecciona uno de sus elementos secundarios, al menos en modo vertical. Líneas 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

Pensé que documentaría esto para aquellos que están tratando de hacer que Collapse funcione con un componente personalizado: de manera similar a lo que mencionó @jfreixa , simplemente pase todos los accesorios dados al componente personalizado al Panel, por ejemplo

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


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

Mismo problema que @ncknuna.

Menú Los artículos no se seleccionan cuando están envueltos. ¿Existe alguna solución?

@Nomeyho Terminé reconstruyendo la lógica que determina si la clase ant-menu-submenu-selected se agrega copiando / pegando los métodos relevantes y comentando el cheque original, luego pasando la clase como className en mi contenedor:

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

¿Hay algún arreglo para esto?

Estoy de acuerdo con @ChuckJonas

este problema puede en realidad alejarme de antd ... O al menos hacer que encuentre un reemplazo para estos componentes. Realmente limita su capacidad para crear componentes reutilizables.

Necesito usar Menu SubMenu y Menu.items como este:
¿Por qué? porque puedo usar mis elementos "CustomSubMenu" en otras páginas ... esta es una parte importante de los componentes "reutilizables".

_MainFile.js_

Import CustomSubMenu from './OtherFile.js';

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

y OtherFile.js así:

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

Solución temporal (editada para simplificar) para los submenús:

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

Cuando se trata de matrices:

• pasar apoyos
• agregue eventKey y subMenuKey , que deberían ser únicos

Un mejor enfoque probablemente sería:

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>

Nuevamente, probablemente no quieras usar el índice en la matriz, así que no lo uses en producción, pero la idea es sólida.

• 1 para la capacidad de incrustar componentes antd en componentes personalizados. Esto es decisivo para nosotros

Creo que tenemos una forma de eliminar la dependencia de la clave. Tome el menú como ejemplo, podemos introducir un itemKey prop y luego usar context para implementar el menú. Para mantener la compatibilidad, el menú aún atraviesa a los niños y cambia key a itemKey si se presenta. Al mismo tiempo, también podemos mantener la semántica de accesorios como selectedKeys .

@yesmeck para ser honesto, hace un tiempo ya que no uso ant design ( pero planeo usarlo para una aplicación importante dentro de esta semana ).

Por lo que tengo entendido, ¿podría beneficiarse de reaccionar nuevo context API como solución?

Son excelentes noticias

Sí, necesitamos context lugar de cloneElement para resolver el problema.

Creo que una solución es no usar "React.Children.forEach" y "React.cloneElement" para pasar accesorios y establecer nuevos accesorios, usar una función, por ejemplo, para personalizar:

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

y antd select source también usan accesorios de función para niños en lugar de "React.Children.forEach" y "React.cloneElement"

Disculpe si esta es una pregunta estúpida, pero todavía soy bastante nuevo en React y Ant Design.
¿Significa esto que prácticamente no podemos usar los menús de diseño de Ant dentro de un SPA conectado a react-redux?
Si es así, ¿cómo se puede escribir un SPA relativamente complejo con Ant Design? ¿Existe alguna solución?

¿Algún avance en esto?

¿hay alguna actualización sobre este problema? El elemento del menú se comporta de manera extraña con HOC.

Hola ! Lo mismo aquí, estoy realmente interesado en poder personalizar este tipo de componentes.
En realidad, tengo el problema con un Select.Option

Ninguna solución propuesta en este hilo me ayudó a hacerlo funcionar, tengo una selección de trabajo con opciones vacías ...

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;

Comencé a usar CASL para representar elementos de la interfaz de usuario según el permiso del usuario. Sin embargo, me encontré con el problema de que los SubMenus no se procesan porque la llamada a la función isRootMenu falla debido al hecho de que los accesorios no se propagan correctamente a los elementos secundarios.

Como solución temporal, definí los SubMenus como constantes y pasé los accesorios 'a mano':
`` ``
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 solución no es muy útil, pero funciona por ahora. Sin embargo, sigo teniendo el problema de que el título del submenú que incluye un icono no se representa correctamente. Falta el icono.

¿Alguien tiene una idea de cómo solucionarlo?

Creé un escaparate aquí: https://github.com/gibelium/meteor-react-antd-casl

GitHub

gibelio / meteor-react-antd-casl

Exhibición para el uso de la biblioteca de autorización CASL en un entorno meteor / react usando la biblioteca de interfaz de usuario ant-design - gibelium / meteor-react-antd-casl

@gibelium Creo que la representación de iconos merece su propio problema en realidad. Cloné su repositorio e intenté reemplazar el ícono con un botón fantasma y el contorno del botón es visible, pero el ícono tampoco se muestra en / en el botón ...

@gotjoshua , ¿

La configuración de los elementos del menú expandido predeterminados tampoco funciona. Mi implementación de solución alternativa ignora la propiedad defaultOpenKeys de Menu.

¿Alguna idea de cómo resolver eso?

Este problema realmente debería mencionarse en los documentos, desperdicié un día laboral completo investigando este error solo para comprender que esta biblioteca no se puede usar para mí. Por favor, ponga una advertencia para que otros desarrolladores no tengan que perder tanto tiempo averiguando que usó un anti-patrón, transmitiendo claves de React, y ahora es muy frágil para tantos HOC o decoradores disponibles para la comunidad.
Esto es realmente una lástima. Espero que lo solucione en su próxima versión principal.

¿hay alguna actualización sobre este problema? Establecer menú predeterminadoOpenKeys no funciona

Totalmente algo que debería considerarse muy rápido como de alta prioridad. 🔥

Tengo un caso de uso similar que (probablemente) no puedo implementar.
Me gustaría crear un componente conectado redux que muestre Select con opciones basadas en datos en la tienda redux. Como no quiero "copiar y pegar" el mismo código en todas partes, me gustaría usar este tipo de componente dentro de Form.getFieldDecorator , pero debido al uso de connect HOC no puedo hacerlo eso.

EDITAR: Encontré la solución para mi caso de uso. Pude crear un componente como el descrito anteriormente con la opción forwardRef como esta:
connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(Component);
Esta solución es específica para connect HOC, pero debería poder crear una solución similar usando React.forwardRef .

Además de los comentarios anteriores, sí, también creo que esto podría considerarse de alta prioridad. Después de haber resuelto con éxito uno de mis problemas (como describí anteriormente), ahora necesitaría crear el componente Tabs.TabPane envuelto con mi componente personalizado. Tengo un caso de uso muy común: el componente de envoltura se usa para verificar los permisos, por lo que si se cumplen las condiciones, el componente secundario se procesa, de lo contrario no.

¿Existe alguna solución sencilla y funcional para esto?

alguna actualización sobre esto por favor?

Encontré una solución, básicamente puedes pasar el resto de los accesorios con del componente envuelto.

Esto muestra advertencias de la consola. ¿Alguna forma de solucionar esto?
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` en su lugar. Si lo pasó accidentalmente de un componente principal, elimínelo del elemento DOM.

index.js: 1437 Advertencia: valor no válido para la propiedad dispatch en

mismo problema ... Quiero crear un componente de permiso como HOC para envolver Menu.Item pero antd no permite esto ... triste

Pasé un tiempo en ese tema ...

y es factible 🎉, solo necesitas pasar los accesorios de descanso a ie. Collapse.Panel (verifique el código fuente de rc-panel para entenderlo)

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

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

y luego úsalo así:

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

¡Sería fantástico ver esta solución en la versión 4.0!

Esta es una prioridad absoluta.
Literalmente hace que esos componentes sean inutilizables cuando se requieren comportamientos especiales (a veces incluso simples, como la autorización).
Por ejemplo, estoy tratando de crear un menú cargado dinámicamente, así que literalmente muestro un Menu.Item deshabilitado con una ruleta como nombre hasta que llegan los datos.
Eso está lejos de ser óptimo.

Pasé un tiempo en ese tema ...

y es factible 🎉, solo necesitas pasar los accesorios de descanso a ie. Collapse.Panel (verifique el código fuente de rc-panel para entenderlo)

Si bien es una gran solución (¡de verdad! La estoy usando en mis proyectos), pierde algo de funcionalidad.
Es decir, si su <SubMenu> no es un hijo directo de <Menu> , defaultOpenKeys no funcionará. 😞

Acabo de encontrar este problema FYI.

Definitivamente necesita reconocimiento en la documentación. Es muy frustrante encontrarme con este problema (entre algunos otros menores) que me hacen reconsiderar seriamente el uso de AntDesign en mis proyectos.

No puedo creer que todavía no haya una solución para eso.

Esto realmente necesita ser arreglado. La mayoría de los desarrolladores no usan componentes directamente desde el primer momento. Esto significa que es posible que deseemos integrar más funciones que no se pueden agregar de otra manera a través de la API proporcionada. No llamaría a los HOC un caso de uso no común o de baja prioridad. Es fundamental para la naturaleza compositiva de React.

Por favor, solucione esto y, mientras se corrige, agregue la información, así como las soluciones alternativas que la gente ha encontrado aquí en sus documentos oficiales.

Por favor, solucione esto y, mientras se corrige, agregue la información, así como las soluciones alternativas que la gente ha encontrado aquí en sus documentos oficiales.

Los mantenedores están abiertos a las relaciones públicas, también puede enviar un relaciones públicas para una actualización de documentos si lo desea y tiene tiempo para hacerlo.

@ afc163

Pasé un tiempo en ese tema ...

y es factible, solo necesita pasar apoyos de descanso a ie. Collapse.Panel (verifique el código fuente de rc-panel para entenderlo)

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

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

y luego úsalo así:

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

¿Alguien puede explicar lo que está sucediendo a continuación? También tratando de envolver Panel dentro de un componente.

Si uso 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}>
...

No funciona.

Pero tan pronto como use esto en su lugar:

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

empieza a funcionar.
¿Alguien puede explicar por qué?

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

empieza a funcionar.

¿Alguien puede explicar por qué?

Según tengo entendido, el Colapso principal deberá establecer accesorios que no sean el encabezado, la clave y más (de su ejemplo no funcional). Estos accesorios del colapso principal deben colocarse explícitamente en el componente de panel dentro de su componente personalizado.

Supongo que podría usar React Inspector para aprender todos los posibles accesorios que cambiarán y pasarlos uno por uno, pero la sintaxis de ... accesorios asegura que todo lo que el padre quiera agregar a su Panel secundario se adjuntará ( incluidos, entre otros, los que necesita establecer explícitamente)

Este problema debe solucionarse.
MUCHOS (o casi) desarrolladores quieren usar la biblioteca para personalizar los componentes.

Ejemplo)
Este código no funciona. Porque el menú y el elemento del menú necesitan accesorios opacos.

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

@moonjoungyoung @adamerose
¿Leíste el hilo?
Tienes que pasar los accesorios de descanso al componente antd interno para que funcione.

Esto es lo que funcionó para mí para obtener componentes personalizados + representación condicional para react-router NavLinks dentro de un antd Menu , aunque realmente esto necesita una solución, lo desperdicié mucho tiempo antes de encontrar este hilo.

_editar- No importa, selectedKeys no funciona correctamente_

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
¿Leíste el hilo?
Tienes que pasar los accesorios de descanso al componente antd interno para que funcione.

¿Puedes echar un vistazo a mi ejemplo anterior? Pensé que apliqué todos los trabajos en este hilo, pero todavía no funciona correctamente. Estoy pasando los accesorios hacia abajo y extendiéndolos en el Menu.Item pero aún no se resaltará cuando está activo, y el árbol de componentes se ve así

Pasé un tiempo en ese tema ...

y es factible, solo necesita pasar apoyos de descanso a ie. Collapse.Panel (verifique el código fuente de rc-panel para entenderlo)

En mi caso, tengo que poner "header = {calculado_header}" detrás de "{... props}". Si no hago esto, el encabezado del panel no se muestra. Creo que "{... props}", que aparece más adelante en la secuencia, sobrescribe la información del "encabezado". Cuando pongo "{... props}" al principio, funciona. En ese caso, creo que el "encabezado" que aparece más tarde sobrescribe la información del "encabezado" en los accesorios.

Mi adaptación a la respuesta de @ marcin-piela es la siguiente:

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