Usando react-i18next dentro de un componente de clase

Luego de consultar con especialistas en este tema, programadores de varias ramas y maestros dimos con la solución a la cuestión y la compartimos en esta publicación.

Solución:

Al igual que t está disponible como accesorios en un functional componente, puede acceder a él desde props en un componente de clase después de envolver TradesTableComponent con translate HOC. Todo lo que necesitas hacer es destructure desde accesorios en el método de renderizado como

const  t  = this.props;

Código relevante

render() 
    const  t  = this.props;
    return (
      

        

          
            
              

                t('history.controls.show')
                this.state.rows
                t('history.controls.results')
                
              









            
            
               this.changeRowAmount(10)>10
               this.changeRowAmount(25)>25
               this.changeRowAmount(50)>50
               this.changeRowAmount(100)>100
            
          
        
        

          

            
            

          
        
      
    );
  

Actualmente (es decir, 2020), los documentos sugieren el HOC empaquetado withTranslation():

import React from 'react';
import  withTranslation  from 'react-i18next';

class MyComponent extends Component 
  return 
this.props.t('key')


export default withTranslation()(MyComponent);

Si te gusta usar espacios de nombres luego exportar:

export default withTranslation('namespace')(MyComponent);

Ref: documentos oficiales.

Aquí hay un ejemplo práctico de cómo usar translation en un componente basado en clases en React Native.

import  withTranslation  from 'react-i18next';

class PersonalScreen extends React.Component 
  render() 
    const  t  = this.props;
    return (
      t('Translate this text')
    )
  


export default withTranslation()(PersonalScreen)

Finalizando este artículo puedes encontrar las notas de otros desarrolladores, tú asimismo eres capaz insertar el tuyo si lo deseas.

---

---

Utiliza Nuestro Buscador