gpt4 book ai didi

javascript - Reactjs、reducers、语言切换

转载 作者:太空宇宙 更新时间:2023-11-04 15:40:27 25 4
gpt4 key购买 nike

我刚刚接手了一个新的reactjs项目——我正在尝试回顾如何调用语言切换。

就像页脚中有两个链接可以进行语言切换。

//页脚.js

import React from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { selectLanguage, getLangDetails } from '../../actions/action_language'
import langObject from './Footer.lang'

class Footer extends React.Component {
constructor (props) {
super(props)
this.changeLanguageToGerman = this.changeLanguageToGerman.bind(this)
this.changeLanguageToEnglish = this.changeLanguageToEnglish.bind(this)
}

changeLanguageToGerman () {
this.props.selectLanguage('de')
}

changeLanguageToEnglish () {
this.props.selectLanguage('en')
}

render () {
let activeLang = 'language--active'
let alternativeLang = 'language--hover'
const lang = getLangDetails(this.props.active_language, langObject)
return (
<div>
<footer className='main-footer show-for-medium-only'>
<div className='medium-15 columns'>
<p className='text--white grid__row--offset--15 footer-text'>
<Link to={this.props.deURL} className={`text--white footer-text ${this.props.active_language === 'de' ? activeLang : alternativeLang}`} onClick={this.changeLanguageToGerman}>DE</Link>
&nbsp;&nbsp;&#124;&nbsp;&nbsp;
<Link to={this.props.enURL} className={`text--white footer-text ${this.props.active_language === 'en' ? activeLang : alternativeLang}`} onClick={this.changeLanguageToEnglish}>EN</Link>
</p>
</div>
</footer>
</div>
)
}
}

const mapStateToProps = (state) => {
return {
active_language: state.active_language
}
}

function mapDispatchToProps (dispatch) {
return bindActionCreators({selectLanguage: selectLanguage}, dispatch)
}

const { string, func } = React.PropTypes
Footer.propTypes = {
deURL: string,
enURL: string,
selectLanguage: func,
active_language: string
}

export default connect(mapStateToProps, mapDispatchToProps)(Footer)

//header.js

import React from 'react'
import { connect } from 'react-redux'
import { getLangDetails } from '../../actions/action_language'
import langObject from './Header.lang'

class Header extends React.Component {
render () {
let transparent
transparent = this.props.transparent ? 'transparent' : ''
const lang = getLangDetails(this.props.active_language, langObject)
return (
<div>
<header className={` main_headerbar__landing transition show-for-large-up ${transparent} `}>
<div className='contain-to-grid'>
{lang}
</div>
</header>
</div>
)
}
}

const mapStateToProps = (state) => {
return {
active_language: state.active_language
}
}

const { bool, string } = React.PropTypes
Header.propTypes = {
transparent: bool,
active_language: string
}

export default connect(mapStateToProps)(Header)

--- 所以这些是页眉/页脚组件 - 每个组件都有一个 json 文件,该文件分为一个 lang 数组。

有一个文件看起来像一些全局 js,我认为它与此 Hook - 但我正在努力将此功能扩展到网站的其余组件/页面

//action_language.js

export const LANGUAGE_SELECTED = 'LANGUAGE_SELECTED'

export function selectLanguage (language) {
return {
type: LANGUAGE_SELECTED,
payload: language
}
}

export function getLangDetails (language = 'de', langObject) {
const langData = langObject.langs.filter((langVar) => langVar.lang === language)
return langData['0'].lines
}
<小时/>

好的 - 这是第一页 - 称为服务。现在首先让我感到困惑的是,不要使用 active_language,它现在只是语言。

//services.js

import React from 'react'
import Header from '../HeaderLanding/Header'
import Footer from '../Footer/Footer'
import NoBundle from './NoBundle'
import HowTiles from './HowTiles'
import CarouselTiles from './CarouselTiles'
import YourAdvantages from './YourAdvantages'
import InformationTiles from './InformationTiles'
import ContactTiles from './ContactTiles'

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { selectLanguage, getLangDetails } from '../../actions/action_language'

// language file
import langObject from './services.lang.json'

// services css
import './services.css'

// getting the distinct URLs from the lang files
const deURL = langObject.langs[0].pageURL
const enURL = langObject.langs[1].pageURL

const Spacers = () => (
<div>
<div className='row show-for-large-up' style={{ height: '250px' }} />
<div className='row show-for-medium-only' style={{ height: '150px' }} />
<div className='row show-for-small-only' style={{ height: '80px' }} />
</div>
)

class Services extends React.Component {
constructor (props) {
super(props)
this.language = props.match.params.langURL
}
componentWillMount () {
document.getElementById('body').className = 'overlay-background-services'

this.updateLanguage()
}
updateLanguage () {
console.log('updatelang', this.language)
if (this.language === 'de' || !this.language) {
this.props.selectLanguage('de')
} else {
this.props.selectLanguage('en')
}
}
componentWillUnmount () {
document.getElementById('body').className = ''
}

render () {
const lang = getLangDetails(this.language, langObject)
return (
<div>
<Header transparent />
<Spacers />
<NoBundle lang={lang} />
<HowTiles />
<CarouselTiles />
<YourAdvantages />
<InformationTiles />
<ContactTiles />
<Footer deURL={deURL} enURL={enURL} />
</div>
)
}
}

const mapStateToProps = (state) => {
return {
language: state.language
}
}

function mapDispatchToProps (dispatch) {
return bindActionCreators({selectLanguage: selectLanguage}, dispatch)
}

const { func, string, object } = React.PropTypes
Services.propTypes = {
selectLanguage: func,
langURL: string,
params: object,
match: object
}

export default connect(mapStateToProps, mapDispatchToProps)(Services)

最佳答案

页脚组件通过调用 Redux 操作创建器 selectLanguage 来设置当前语言。本质上,这会向商店分派(dispatch)一个操作(您可以将其视为带有一些相应数据(语言)的自定义事件),该商店将保留用户的语言选择以供在其他地方使用。

为了在其他组件中使用该语言,需要将该语言选择从 Redux 存储传递到组件(在本例中为 header )。

这是 header 中感兴趣的代码,它可以执行此操作...

const mapStateToProps = (state) => {
return {
active_language: state.active_language
}
}

export default connect(mapStateToProps)(Header)

在这里,您将 header 连接到商店,并使用一个描述商店应如何将值映射到 react 组件上的 Prop 的函数。 state.active_language 是存储用户选择的语言的位置,这告诉它作为 Header 组件上名为 active_language 的 prop 传递

connect 函数是一个装饰器,它将创建所谓的高阶组件 (HOC),它本质上是一个自动注入(inject) props 或功能的组件(在本例中使用自动装饰)从商店传递了 active_language 属性的值)

您可以对需要此语言设置的任何其他组件执行相同的操作,或者进一步执行一两步

不要传递事件语言名称,而是传递相应的语言本身...

import { getLangDetails } from '../../actions/action_language'
import langObject from './Header.lang'

const mapStateToProps = (state) => {
return {
active_language: getLangDetails(state.active_language, langObject)
}
}

export default connect(mapStateToProps)(Header)

或者最好编写另一个 HOC 来包装您使用此信息传递的任何组件...

import { getLangDetails } from '../../actions/action_language'

export default const injectLanguage = (component, langObject) => connect((state) => ({
language: getLangDetails(state.active_language, langObject)
})
)(component)

然后在带有 language 属性的后续组件中,用此装饰

import injectLanguage from './some/where'
import langObject from './MyLanguageDetailsAwareComponent.lang'

class MyLanguageDetailsAwareComponent extends React.Component {

render() {
return this.props.language
}

}

export default injectLanguage(MyLanguageDetailsAwareComponent, langObject)

关于javascript - Reactjs、reducers、语言切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43927067/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com