번역 런타임을 만드는 방법

Question

나는 런타임 번역을 간단하게하고 있습니다. 로케일 스위처를 누르면 아무 일도 없었습니다. 페이지를 새로 고치면 제목이으로 변경되었습니다. 따라서 런타임은입니다.

번역 이미지 : 여기

내 코드 :

관리자 :

import { en } from './languages/English'; 
import { fr } from './languages/French'; 
const messages = { 
en, 
fr 
} 
<Admin ... 
    locale={localStorage.getItem('language') ? localStorage.getItem('language') : 'en'} 
    messages={messages} 
> 
.... 
</Admin> 

로케일 스위처 :

switchToFrench =() => this.props.changeLocale('fr'); 
switchToEnglish =() => this.props.changeLocale('en'); 
switchLanguage(language) { 
    localStorage.setItem('language', language); 
    this.props.changeLocale(language); 
} 

render() { 
    return (
     <div> 
      <div>Language</div> 
      <button label="en" onClick={() => this.switchLanguage('en')}>English</button> 
      <button label="fr" onClick={() => this.switchLanguage('fr')}>French</button> 
     </div> 
    ); 
} 

영어/프랑스어 파일 :

export const en = { 
name: 'English', 
locale: 'en', 
user: { 
    no: 'No', 
    name: 'Name', 
    username: 'User Name', 
    email: 'Email', 
} 
} 
export const fr = { 
name: 'French', 
locale: 'fr', 
user: { 
    no: 'No', 
    name: 'Nom', 
    username: 'Nom d\'utilisateur', 
    email: 'Email', 
} 
} 

UserList에 :

class UserList extends Component { 
render() { 
    const { translate } = this.props; 
    return(
     <div> 
      <LocaleSwitcher /> 
      <List title="All users" {...this.props}> 
       <Datagrid> 
        <TextField source="id" label={translate('user.no')}/> 
        <TextField source="name" label={translate('user.name')}/> 
        <TextField source="username" label={translate('user.username')}/> 
        <EmailField source="email" label={translate('user.email')}/> 
       </Datagrid> 
      </List> 
     </div> 
    ) 
} 
} 
export default translate(UserList); 

내가 AOR에서 모든 기본 구성 요소를 사용하고 있습니다. 런타임 번역을 만드는 방법을 보여주십시오.

Answer 1

LocaleSwitcher 구성 요소는 Admin 구성 요소에 넣을 수 있으며 callBack 함수에는 this.forceUpdate()를 사용할 수 있습니다. 이렇게하면 관리 구성 요소가 다시 렌더링되고 올바른 로켈은 로컬 저장소에서 가져옵니다. 같은 :

당신이이 답변에 같은 저장소를 사용하는 것이 좋습니다 돌아 오는 사용할 경우

<Admin ... 
    locale={localStorage.getItem('language') ? 
    localStorage.getItem('language') 
    : 'en'} 
    messages={messages} 
> 
    <LocaleSwitcher onChange={() => this.forceUpdate()}/> 
</Admin> 

:

: Changing state/props of root component with Redux?

Answer 2

AOR 그렇게 할 로케일 변경 작업을 제공합니다 (여기 a working example on the demo입니다) marmelab/admin-on-rest-demo

:

소스 코드는 github에 볼 수 있습니다

Answer 3

Custom App 로캘을 전환하기 위해 전체 프로젝트를 변경하지 않기 때문에이 솔루션으로 끝납니다.

나는 (event, index, value)을 받음으로서 SelectField에 onChange={this.switchToLocale}을 사용하고 있습니다. 문서에서 예제를 자유롭게 사용할 수 있습니다. 중요한 부분은 reload() 기능입니다.

switchToLocale = (event, index, value) => { 
    localStorage.setItem('locale', value); 
    this.props.changeLocale(value); 
    window.location.reload(); 
}; 

저는 만족스럽지 않지만 관리자가 매분 자신의 로케일을 변경하지 않을 것이라고 생각합니다.