尝试使用按钮进行语言切换。我使用react-i18next
框架。在console.log中,我遇到错误this.props.t is not a function,
{this.props.t ('Welcome to React')}
以下错误:{this.props.t ('Welcome to React')}
此处所有代码:https://stackblitz.com/edit/react-gcbxwe?file=Form.jsx
index.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import Form from "./form/Form.jsx";
import './i18n';
import i18n from './i18n';
import { withNamespaces } from 'react-i18next';
render(
<Form/>,
window.document.getElementById("root")
);
Form.js
import React, { Component } from 'react';
import Todos from './Todos';
class Form extends Component {
constructor (props) {
super(props);
this.state = {
token: '',
todos: []
}
}
render () {
const changeLanguage = (lng) => {
i18n.changeLanguage(lng);
}
return (
<div>
{this.state.token ?
<Todos
todos={this.state.todos}
/>
:
<form action="" method="post" autoComplete="off">
<div>
<button onClick={() => changeLanguage('de')}>de</button>
<button onClick={() => changeLanguage('en')}>en</button>
<h1>{this.props.t('Welcome to React')}</h1>
</div>
<h2>Log in</h2>
<div>
<label htmlFor="email">email</label>
<input type="email" required className="form-control formControlEmail" name="email"
placeholder="Email"
value={this.state.email}
onChange={this.handleUserInput} />
</div>>
<button type="submit" value="Submit" className="btn btn-primary btn-block btnLogin">Log in</button>
</form>
}
</div>
)
}
}
export default withNamespaces()(Form);