es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • .children.toArray() – TS2339: La propiedad ‘key’ no existe en el tipo ‘ReactChild | ReactFragment | ReactPortal’… – React Typescript

.children.toArray() – TS2339: La propiedad ‘key’ no existe en el tipo ‘ReactChild | ReactFragment | ReactPortal’… – React Typescript

05 Aug, 2023 Programación

Estoy creando un componente/envoltorio de TypeScript que agrega un divisor entre cada hijo:

import React, { FC, Children } from 'react'

const DividedChildren: FC = ({ children }) => {
  return (
    <div>
      {Children.toArray(children).map((node, index) => {
        if (index === 0) return node
        return (
          <fragment key="{node.key}"> // Error de TS, pero el código funciona bien
            <div classname="divider"></div>
            {node}
          </fragment>
        )
      })}
    </div>
  )

Sin embargo, estoy obteniendo un error de TypeScript cuando intento mover la propiedad key del hijo a su nuevo contenedor:

TS2339: La propiedad 'key' no existe en el tipo 'ReactChild | ReactFragment | ReactPortal'. La propiedad 'key' no existe en el tipo 'string'.

¿Cómo puedo mover la propiedad ‘key’ de cada elemento de manera segura en cuanto a tipos?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mover los elementos clave de manera segura a su nuevo contenedor, primero puedes definir el tipo para los elementos hijos utilizando React.ReactElement en lugar de ReactNode. Esto asegurará que cada hijo tenga una propiedad key definida. Luego, puedes utilizar una aserción de tipo para convertir el elemento hijo a este tipo antes de acceder a su propiedad key en la función map. Aquí tienes un ejemplo actualizado:

    import React, { FC, Children, ReactElement, Fragment } from 'react'

const DividedChildren: FC = ({ children }) => {
  return (
    <div>
      {Children.toArray(children).map((child, index) => {
        if (index === 0) return child
        const element = child as ReactElement // aserción de tipo para convertir child a ReactElement
        return (
          <fragment key="{element.key}">
            <div classname="divider"></div>
            {element}
          </fragment>
        )
      })}
    </div>
  )
}

Comments are closed.