Estoy tratando de implementar una representación condicional simple donde si prefixText prop tiene más de 0 cadenas, renderice elementos de doble tramo, de lo contrario renderice un solo elemento de tramo. Pero en prefixText.length recibo un mensaje de error que dice "se espera". También en Text, aparece el error de tipo "faltan propiedades para ReactElement<any, any>". ¿Cómo puedo solucionar este problema? https://codesandbox.io/s/text-component-v2dbt?file=/src/App.tsx:0-538
import * as React from "react"; export interface TextProps { children: string; prefixText?: string; } export const Text: React.FunctionComponent<TextProps> = ({ children, prefixText }: TextProps) => { return ( { prefixText.length > 0 ? <span> <span style={{ fontWeight: "bold" }}>{prefixText} </span> <span>{children}</span> </span> : <span>{children}</span> } ); }; export default function App() { return ( <div> <Text prefixText="Tips:">favourite vacation</Text> </div> ); }Debe envolver su declaración de devolución en React.Fragment .
Debe tener un aspecto como este
return ( <> { prefixText.length > 0 ? ( <span> <span style={{ fontWeight: "bold" }}>{prefixText} </span> <span>{children}</span> </span> ) : ( <span>{children}</span> ) </> } );O también puede deshacerse de las llaves de retorno y crear una construcción como esta:
return prefixText.length > 0 ? ( <span> <span style={{ fontWeight: "bold" }}>{prefixText} </span> <span>{children}</span> </span> ) : ( <span>{children}</span> )Actualice su código de bloqueo de retorno de la siguiente manera:
return ( prefixText ? <span> <span style={{ fontWeight: "bold" }}>{prefixText}</span> <span>{children}</span> </span> : <span>{children}</span> );O actualice su componente a lo siguiente:
export const Text: React.FunctionComponent<TextProps> = ({ children, prefixText }: TextProps) => ( prefixText ? <span> <span style={{ fontWeight: "bold" }}>{prefixText} </span> <span>{children}</span> </span> : <span>{children}</span> );envuelva su componente con react.fragment y también verifique si existe prefixText en su condición porque prefixText es parcial en su interfaz mecanografiada
return ( <React.Fragment> { prefixText && prefixText.length > 0 ? <span> <span style={{ fontWeight: "bold" }}>{prefixText} </span> <span>{children}</span> </span> : <span>{children}</span> } </React.Fragment> );