Ahora tengo dos componentes, Lista y Elemento. Dado que Item solo se usa en List, quiero ponerlos en un solo archivo JSX. Sin embargo, el elemento debe envolverse con injectIntl para habilitar la funcionalidad de la cadena i18n.
Descubrí que no puedo exportar Item sin agregar default , mientras que List ya se exporta de manera predeterminada y la única forma en que puedo hacerlo es importar Item desde otro archivo o pasar la cadena traducida de List a Item.
Me pregunto por qué no puedo hacerlo con el siguiente código y ¿hay alguna práctica mejor que pueda seguir al usar injectIntl en componentes funcionales?
// for simplicity imports are omitted // Item and List are written in the same file (List.jsx) const Item = ({content, intl}) => { return ( <> <h1>{intl.formatMessage(content.i18nkey)}</h1> <img src={content.imgURL} /> </> ) } export injectIntl(Item); // this line is reported syntax error const List = ({contents}) => { return ( contents.map((content) => <Item content={content}/> ) ) } export default List;Esto funciona bien:
export const Item = injectIntl( (props) => {...} )Simplemente no olvide los corchetes, es decir, const Item = injectIntl ( función de flecha )
También use rest para obtener todos los parámetros existentes. Y elimine espacios de su identificación, de lo contrario, querySelector no funcionará. En el caso siguiente, la identificación también se usa como una etiqueta que se muestra en la celda:
export const TableCellId = injectIntl((props) => { const { id, intl, ...rest } = props return ( <TableCell id={removeSpaces(id)} {...rest}> {mytanslation(intl, id)} </TableCell> ) })