Question

我是React的新手，我有一个React组件，如下面的代码所示，我无法找到使currentLanFlag img src动态化并跟随用户在下拉语言菜单中选择的方法...。 .. 我想要的是：当用户单击锚标记German时，带有CLass currentLanFlag的img将成为German Flag，英语和其他语言相同。

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import { translate, Trans } from 'react-i18next';
import de from '../../../assets/img/de.png';
import en from '../../../assets/img/en.png';
import fr from '../../../assets/img/fr.png';
import pt from '../../../assets/img/pt.png';
import ar from '../../../assets/img/ar.GIF';
import '../../../assets/FontAwesome/css/font-awesome.min.css';
import './topNavComponenets.css';
const { version: appVersion } = require('../../../../package.json');
class TopNavComponenets extends Component {
  constructor (props) {
    super()
    this.state = {
      firstName: '',
      lastName: ''
    }
    this.logout = this.logout.bind(this)
    axios.get('api/auth/en/profile',{ withCredentials: true })
      .then(response => this.setState({
        firstName: response.data.firstName,
        lastName: response.data.lastName,
      })); 
  }
  logout () {
    axios.get('api/auth/en/logout',{ withCredentials: true })
  }

  render () {
        const { i18n } = this.props;
        const changeLanguage = (lng) => {
          i18n.changeLanguage(lng);;
        };
        let currentLanFlag = en;

return (
  <div className="topNavComponenets">
    <div className='infoContainer row'>
      < div className="col-12 text-right">
          <div className="userCont col-4">
            <Link to="/user" ><i className="fa fa-user" title={"My Profile"}></i></Link>
                <p className="infos">
                  {this.state.firstName} {this.state.lastName} 
                </p>
          </div>

            <div className='version col-4'>
                <div className="dropdown show">
                  <a className="dropdown-toggle" href="" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <img 
                  className="currentLanFlag" 
                  src={ currentLanFlag } 
                  alt="Language Flag"/>
                  </a>
                  <div className="dropdown-menu" aria-labelledby="dropdownMenuLink">
                    <a onClick={() => changeLanguage('de')} className="dropdown-item"><img className="flag" src={de} alt=""/><Trans>German</Trans></a>
                    <a onClick={() => changeLanguage('en')} className="dropdown-item"><img className="flag" src={en} alt=""/><Trans>English</Trans></a>
                    <a onClick={() => changeLanguage('fr')} className="dropdown-item"><img className="flag" src={fr} alt=""/><Trans>French</Trans></a>
                    <a onClick={() => changeLanguage('pt')} className="dropdown-item"><img className="flag" src={pt} alt=""/><Trans>Portugues</Trans></a>
                    <a onClick={() => changeLanguage('ar')} className="dropdown-item"><img className="flag" src={ar} alt=""/><Trans>Arabic</Trans></a>
                  </div>
                </div>
                <p title={"CMS Version"}>v.{appVersion}</p>
            </div>

            <div className='buttonContainer col-4'>
              <a href="/login"> <span onClick={this.logout}>
              <i className="fa fa-power-off" title={"Logout"}></i>
              </span></a>
            </div>

        </div>          
    </div>
  </div>
)}} 
export default translate('translations')(TopNavComponenets);

Answer 1

我个人将您的状态设置为currentLanFlag。

this.state = {
    ...
    currentLanFlag: 'en'
};

然后将您的图片标签更改为类似

<img 
className="currentLanFlag" 
src={ this.state.currentLanFlag } 
alt="Language Flag"/>

然后，您的单击应更改this.state.currentLanFlag的状态。

类似的东西

// A function
changeLan = (event) {
  this.setState({
    currentLanFlag: event.target.data
  });
  changeLanguage(event.target.data);
}
// in your return
<a data='de' onClick={this.changeLan}><img className="flag" src={de} alt=""/><Trans>German</Trans></a>

this.setState将告诉反应“某些更改，然后重新呈现”，此时您的语言标记将更新为新标记。

请注意，以上内容未经测试。

您可以在这里找到不错的文档 https://reactjs.org/docs/state-and-lifecycle.html https://reactjs.org/docs/handling-events.html

Answer 2

您只需要进行一些小的更改。这是为了您是否需要在两种不同的语言之间切换。

import en from '../../../assets/img/en.png';
import de from '../../../assets/img/de.png';

1。将当前标志设置为您的状态

state = {
    currLangFlag: 'en'
}

2。将此事件处理程序替换为该事件处理程序

const changeLan = (lng) => {
    this.setState({ currLangFlag: lng })
    i18n.changeLanguage(lng)
}

3。使用三元运算符，您可以在状态更新后切换标志url

{currLangFlag === 'en' ? <img src={en} alt={currLangFlag} /> : <img src={de} alt={currLangFlag} />}

4。呼叫事件处理程序

<NavLink onClick={() => changeLan('en')} to={this.props.location}>
  <img className="flag" src={en} alt=""/><Trans>English</Trans>
</NavLink >
<NavLink onClick={() => changeLan('de')} to={this.props.location}>
  <img className="flag" src={de} alt=""/><Trans>German</Trans>
</NavLink >

ReactJS，如何根据用户在changeLanguage（）中选择切换当前语言标记

2 个答案: