im试图通过gatsby建立一个多语言网站,并在此处使用相同的代码weziple-gatsby-starter-defualt-intl 但是当我使用语言组件中的代码时,它无法正常工作或显示任何下拉菜单,就像它应该 语言组件
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class Language extends Component {
static contextTypes = {
language: PropTypes.object,
}
state = {
value: '',
}
componentDidMount() {
const { language } = this.context;
console.log(this.context)
this.setState({
value: language.locale || language.detected,
})
}
handleChange = event => {
const { language } = this.context
const { originalPath } = language
const { value } = event.target
if (value === this.state.value) {
return
}
this.setState({ value }, () => {
localStorage.setItem('language', value)
window.location.href = `/${value}${originalPath}`
})
}
render() {
const { language } = this.context
const { languages } = language
const { value } = this.state
if (!value) {
return null
}
return (
<select value={value} onChange={this.handleChange}>
{languages.map(({ value, text }) => (
<option key={value} value={value}>
{text}
</option>
))}
</select>
)
}
}
export default Language
当我尝试调试它时,我发现this.context是未定义的,语言也未定义