Javascript react js onClick toggle类在不同组件中的不同元素上

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

如何在navbar按钮上创建一个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}来自'React'；
从“反应汉堡菜单”导入{bubble as Menu}
从“react router dom”导入{NavLink}
导入“/Navbar.css”；
导入“../../data/content.json”
const Provider=require（'react-redux'）。Provider；
const createStore=require（'redux'）。createStore；
const content=require（'../../../reducer'）；
类导航栏扩展组件{
showSettings（活动）{
event.preventDefault（）；
}
render（）{
const data=this.props.data；
让switchLanguage=this.props.switchLanguage；
返回(




{data.home}


{data.projects}


{data.services}


{data.about}


{data.contact}


);
}
}
导出默认导航栏；

这是我要隐藏/显示类的位置。在中的某些标记上，您希望根据所选语言显示和隐藏其中一个标记

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;

import React，{Component}来自'React'；
从“react slick”导入滑块；
从“../../Data/CarouselData.js”导入产品；
导入“/ProjectsCarousel.css”；
类ProjectsCarousel扩展组件{
render（）{
const data=this.props.data；
变量设置={
点：错，
无限：是的，
速度:500,，
幻灯片放映：3，
幻灯片滚动：1，
自适应高度：正确，
自动播放：错误，
自动播放速度：5000，
响应：[
{断点：400，设置：{slidesToShow:1}}，
{断点：1024，设置：{slidesToShow:2}
]
};
返回(
项目
上

{PRODUCTS.map（（产品）=>{
返回(
)
})}
下一个

);
}
}
导出默认的ProjectsCarousel；

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

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

让isEnglish=true；
{‘欢迎}
{“欢迎使用阿拉伯语”}

这可能会解决多元素类切换的问题。请尝试以下方法：

类ToggoleApp扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
}
this.toggleClass=this.toggleClass.bind（this）；
}
切换类别（e）{
让类=‘我的类’；
设els=document.getElementsByCassName（'my-class active'）；
如果（els）{
而（els[0]）{
els[0]。类列表。删除（'active'）
}
}
e、 target.className=classes.replace（'my-class'，'my-class-active'）；
}
render（）{
返回(
切换示例

this.toggleClass（e）}>
一

this.toggleClass（e）}>
二

this.toggleClass（e）}>
三


)
}
}
ReactDOM.render（，document.querySelector（#app））

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#应用程序{
背景：#fff；
边界半径：4px；
填充：20px；
过渡：均为0.2s；
}
.我的班级{
颜色：#FF3355；
}
.我的班级{
颜色：#33FF46；
}

谢谢是的这就是我的意思。但是我如何访问isEnglish并根据用户在不同组件上单击的内容将其设置为true或false呢。我知道我会在我想要更改样式的组件上默认将isEnglish声明为true，但是我如何才能在单击不同组件时将值更改为false用户单击不同组件时为什么要更改语言？要么用户读英语，要么不读英语。所有组件都应该是相同的。取一些按钮或其他调用func的元素