Question

我是新手，我正在构建一个有2种语言的应用程序。您可以使用Redux在导航栏中切换语言来处理状态。我有一个json文件，我存储了两种语言的文本，并使用onClick在它们之间切换。它适用于每个组件和每个页面。但是我的问题是在一些组件上，我使用map（）和find（）函数从不同的json文件中获取数据，所以我觉得我被迫找到另一种解决方案来切换这些组件的语言和最简单的解决方案我可以想到的是隐藏/显示两个h1之间的一个类，例如一个用于英语，一个用于阿拉伯语。

如何在导航栏按钮上创建一个onClick函数，该按钮将更改语言并显示/隐藏其他组件上的类而不是子组件，以显示这两种语言中的一种？

这是Navbar.js

import React, { Component } from 'react';
import { bubble as Menu } from 'react-burger-menu'
import { NavLink } from 'react-router-dom'
import './Navbar.css';
import '../../../data/content.json'
const Provider = require('react-redux').Provider;
const createStore = require('redux').createStore;
const content = require('../../../reducer');

class Navbar extends Component {
  showSettings (event) {
    event.preventDefault();
  }

  render() {
        const data = this.props.data;
        let switchLanguage = this.props.switchLanguage;
    return (
      <div>
              <ul className="right hide-on-med-and-down language">
                <li className="dropdown-button right"><a onClick={switchLanguage.bind(this,'en')} className="language-a">Eng</a></li>
                <li className="dropdown-button right"><a onClick={switchLanguage.bind(this,'ar')} className="language-a">عربي</a></li>
                <li className="right">
                  <p>CALL US: +905061162526</p>
                </li>
              </ul>
        <i onClick={ this.showSettings } className="material-icons sidenav-trigger right">menu</i>
        <Menu >
          <img className="sidenav-logo" src="https://res.cloudinary.com/dd5e5iszi/image/upload/v1522222933/other/home-page-logo.png" alt="cayan group logo"/>
          <li className="link-wrapper">
            <NavLink activeClassName="selected" className="menu-item" exact to="/">{data.home}</NavLink>
          </li>
          <li className="link-wrapper">
            <NavLink activeClassName="selected" className="menu-item" exact to="/projects">{data.projects}</NavLink>
          </li>
          <li className="link-wrapper">
            <NavLink activeClassName="selected" className="menu-item" exact to="/services">{data.services}</NavLink>
          </li>
          <li className="link-wrapper">
            <NavLink activeClassName="selected" className="menu-item" exact to="/about">{data.about}</NavLink>
          </li>
          <li className="link-wrapper">
            <NavLink activeClassName="selected" className="menu-item" exact to="/contact">{data.contact}</NavLink>
          </li>

        </Menu>
        <div className="navbar-fixed">
          <nav className="normal-nav">
            <div className="nav-wrapper">
              <a href="index.html" className="brand-logo"><img className="responsive-img" src="https://res.cloudinary.com/dd5e5iszi/image/upload/v1522221061/other/logo-nav.png" alt="cayan group logo"/></a>

              <ul className="nav-links center hide-on-med-and-down">

                <li className="link-wrapper">
                  <NavLink activeClassName="selected" className="nav-link" exact to="/">{data.home}</NavLink>
                </li>
                <li className="link-wrapper">
                  <NavLink activeClassName="selected" className="nav-link"  to="/projects">{data.projects}</NavLink>
                </li>
                <li className="link-wrapper">
                  <NavLink activeClassName="selected" className="nav-link"  to="/services">{data.services}</NavLink>
                </li>
                <li className="link-wrapper">
                  <NavLink activeClassName="selected" className="nav-link"  to="/about">{data.about}</NavLink>
                </li>
                <li className="link-wrapper">
                  <NavLink activeClassName="selected" className="nav-link"  to="/contact">{data.contact}</NavLink>
                </li>

              </ul>


            </div>

          </nav>
        </div>

      </div>
    );
  }

}

export default Navbar;

这是我想隐藏/展示课程的地方。在某些

标签上，希望根据所选语言显示和隐藏其中一个

import React, { Component } from 'react';
import Slider from 'react-slick';

import PRODUCTS from '../../Data/CarouselData.js';

import './ProjectsCarousel.css';


class ProjectsCarousel extends Component {

  render() {
    const data = this.props.data;
              var settings = {
                dots: false,
                infinite: true,
                speed: 500,
                slidesToShow: 3,
                slidesToScroll: 1,
                adaptiveHeight: true,
                autoplay: false,
                autoplaySpeed: 5000,
                responsive:[
                  { breakpoint: 400, settings: { slidesToShow: 1 } },
                  { breakpoint: 1024, settings: { slidesToShow: 2 } }
                ]
        };
    return (
      <div className="projetcsCarousel ">
              <div className="containermy">
                <div className="row">
                <div className="container">
                  <h1 className="body-h1">PROJECTS</h1>
                </div>

                <div className="carousel">
                  <div className="left-btn col s1">
                    <p>PREV</p>
                  </div>
                <Slider className="inner col s10" {...settings}>

                {PRODUCTS.map((product)=>{
                  return (
                  <a key={product.id} href={'/products/'+product.id}>

                    <div className='wrapper'>
                      <div className={'carouselImages cayan-'+product.id}>
                        <h6>{'CAYAN'+product.id}</h6>
                      </div>
                      <div className="description">
                        <h6>Description</h6>
                        <h5>{product.priceMin + ' - ' + product.priceMax}</h5>
                        <p>{product.description}</p>
                        <p>{product.descriptionAr}</p>
                      </div>
                      <div className="project-info ">
                        <div className="col s6 project-info-icons left">
                          <i className="ion-ios-location-outline "></i>
                          <p>{product.location}</p>
                          <p>{product.locationAr}</p>
                          <br/>
                          <i className="ion-ios-home-outline"></i>
                          <p>{product.types}</p>
                          <br/>
                          <i className="ion-ios-photos-outline"></i>
                          <p>{product.area}</p>
                          <br/>
                        </div>
                        <div className="col s6 project-info-icons right">
                          <i className="ion-ios-pricetag-outline "></i>
                          <p>{product.installment} months installments</p>
                          <br/>
                          <i className="ion-ios-gear-outline"></i>
                          <p>{product.status}</p>
                          <br/>
                          <i className="ion-ios-cart-outline"></i>
                          <p>{product.deliveryDate}</p>
                          <br/>
                        </div>
                        <button className="more-details">MORE DETAILS</button>
                      </div>
                    </div>
                  </a>
                  )
                })}

                </Slider>
                <div className="right-btn col s1">
                  <p>NEXT</p>
                </div>
                </div>
              </div>
            </div>
      </div>
    );
  }

}


export default ProjectsCarousel;

Answer 1

根据我的理解，在阅读问题后，您必须通过更改班级来切换点击元素。我建议的解决方案是更改单个变量值onClick并使用该变量来显示和隐藏例如：

let isEnglish = true;
<h1 style={ display: isEnglish ? block : hidden }>{'Welcome'}</h1>
<h1 style={ display: isEnglish ? none : block }>{'Welcome in Arabic'}</h1>

Answer 2

这可以解决多个元素类切换的问题。尝试一下：

https://jsfiddle.net/menomanabdulla/todu7m6g/11/

class ToggoleApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    
    }
    
    this.toggleClass=this.toggleClass.bind(this);
    
  }
  
   toggleClass(e){
        let classes = 'my-class';
        let els = document.getElementsByClassName('my-class active');
        if(els){
            while (els[0]) {
                els[0].classList.remove('active')
            }
        }
        e.target.className = classes.replace('my-class','my-class active');
    }
  
  render() {
    return (
      <div>
        <h2>Toggle Example</h2>
        <ul>
          <li className="my-class active" onClick={(e) =>this.toggleClass(e)}>
            One
          </li>
          <li className="my-class" onClick={(e) =>this.toggleClass(e)}>
            Two
          </li>
          <li className="my-class" onClick={(e) =>this.toggleClass(e)}>
            Three
          </li>
        </ul>
      </div>
    )
  }
}

ReactDOM.render(<ToggoleApp />, document.querySelector("#app"))

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.my-class{
  color: #FF3355;
}
.my-class.active{
  color: #33FF46;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

<div id="app"></div>

在不同组件内的不同元素上反应js onClick切换类

2 个答案: