时间戳

首页 > 解决方案 > 在状态内设置 react 18next 值

javascript - 在状态内设置 react 18next 值

问题描述

我使用 reactstrap 做了一个下拉并且工作正常，但现在我试图将 react-18next 的值设置为我的状态，作为 dropDownValue 的值。i18n 在我的渲染中工作正常，但我无法在我的状态中访问它的值.. 有什么想法吗？这是我的代码。先感谢您！

dropdownd.jsx：

import React, { PureComponent } from 'react';
import {
  DropdownItem,
  DropdownToggle,
  DropdownMenu,
  UncontrolledDropdown,
} from 'reactstrap';
import { withTranslation } from 'react-i18next';
import PropTypes from 'prop-types';


class TopbarNavDashboards extends PureComponent {
  state = {
    dropDownValue: 'Home', // this must be  {t('app.home')}
    dropdownOpen: false,
  };

  static propTypes = {
    t: PropTypes.func.isRequired,
  };

  toggle = () => {
    const { dropdownOpen } = this.state;
    this.setState({
      dropdownOpen: !dropdownOpen,
    });
  };

  changeValue = (e) => {
    this.setState({ dropDownValue: e.currentTarget.textContent });
  };

  render() {
    const { t } = this.props;
    const { dropdownOpen, dropDownValue } = this.state;
    return (
      <UncontrolledDropdown
        isOpen={dropdownOpen}
        toggle={this.toggle}
        className="topbar__nav-dropdown"
      >
        <DropdownToggle className="topbar__nav-dropdown-toggle">
          {dropDownValue} <MenuSwapIcon />
        </DropdownToggle>
        <DropdownMenu className="topbar__nav-dropdown-menu dropdown__menu">
          <DropdownItem onClick={this.changeValue}>
            <TopbarNavLink route="/home" title={t('app.home')}/>
          </DropdownItem>
          <DropdownItem onClick={this.changeValue}>
            <TopbarNavLink route="/github" title={t('app.github')} />
          </DropdownItem>
          <DropdownItem onClick={this.changeValue}>
            <TopbarNavLink route="/proyects" title={t('app.proyects')} />
          </DropdownItem>
      </UncontrolledDropdown>
    );
  }
}

export default withTranslation('common')(TopbarNavDashboards);

标签： javascriptreactjsreact-i18next

解决方案

我可能是错的，但我认为您可以参考 state 对象中的道具：

state = {
  dropDownValue: this.props.t('app.home')
  dropdownOpen: false,
};

推荐阅读