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

问题描述 投票:0回答:2

我是一个相当新的反应,我正在构建一个有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;
javascript reactjs redux onclick router
2个回答
0
投票

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

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

0
投票

这可能会解决多个元素类切换问题的问题:

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>
© www.soinside.com 2019 - 2024. All rights reserved.