阵营JS单向数据流混乱

Question

这是我想要实现使用reactJS

var offCanvass = function() { 
     $('body').on('click', '.js-fh5co-nav-toggle', function(event) { 

      var $this = $(this); 

      $('#fh5co-offcanvass').toggleClass('fh5co-awake'); 
      $('#fh5co-page, #fh5co-menu').toggleClass('fh5co-sleep'); 

      if ($('#fh5co-offcanvass').hasClass('fh5co-awake')) { 
       $this.addClass('active'); 
      } else { 
       $this.removeClass('active'); 
      } 
      event.preventDefault(); 

     }); 
    }; 

我所能够做的是jQuery的解决方案：通过使用状态和类名，我可以改变的CSS类该组件内的事件上的特定组件。

var classNames = require('classnames'); 
export default class App extends React.Component { 

    render() { 
     var navClass = classNames({ 
     'js-fh5co-nav-toggle': true, 
     'fh5co-nav-toggle': true, 

     }); 
     return (
      <div> 
       <Offcanvas/> 
       <Menu navClass={navClass}/> 
       <Page/> 
      </div> 
     ); 
    } 
} 

export default class Menu extends React.Component { 
    constructor(){ 
    super(); 
    this.state={ 
     isPressed: false, 
    }; 
    } 

    isPressed(){ 
    if(!this.state.isPressed){ 
     this.setState({isPressed: true}); 
    }else{ 
     this.setState({isPressed: false}); 
     } 
    } 

    render() { 
     var navClass = classNames(this.props.navClass, { 
      active: this.state.isPressed 
     }); 
     return (
      <div id="fh5co-menu" class="navbar"> 
       <div class="container"> 
       <div class="row"> 
        <div class="col-md-12"> 
        <a class={navClass} data-toggle="collapse" onClick={this.isPressed.bind(this)} data-target="#fh5co-navbar" aria-expanded="false" aria-controls="navbar"><span></span> <i></i></a> 
        <a href="/index" class="navbar-brand"><span>dota groove<a class=""></a></span></a> 
        </div> 
       </div> 
       </div> 
      </div> 
     ); 
    } 
} 

export default class Canvas extends React.Component { 


    render(){ 
    return(
     <div id="fh5co-offcanvass"> 
      <ul> 
      <li class="active"><a href="" data-nav-section="home">Home</a></li> 
      <li><a href="" data-nav-section="login">Register</a></li> 
      <li><a href="" data-nav-section="clients">Login</a></li> 
      </ul> 
     </div> 
    ); 
    } 
} 

我想要做的：从一个组件使用一个事件来触发另一个组件，它不是自上而下的层次结构的类名变化。这是我的组件结构。

-app 
    -canvas ->classname apends here 
    -menu ->if click event occurs here 
    -page 

Answer 1

请问以下模式适合您吗？

子组件（menu）通过点击事件更改其父级（app）的状态。然后父母通过道具将更新后的状态发送给另一个孩子（canvas）。

这里是一个短的codecademy练习，描述这种模式：https://www.codecademy.com/en/courses/react-102/lessons/child-updates-sibling/exercises/child-updates-sibling-intro

Answer 2

您的<App/>需要处理事件。您可以将回调函数作为支持传递给<Menu />，点击此函数在App中调用。现在，该应用可以对点击做出反应并将其传递给<Canvas/>。

class App extends Component { 
    constructor() { 
    super(); 
    this.state = {clicked: false}; 
    } 

    handleClick() { 
    this.setState({clicked: !this.state.clicked}); 
    } 

    render() { 
    return (
    <div> 
     <OffCanvas isClicked={this.state.clicked} /> 
     <Menu onClick={() => this.handleClick()} /> 
    </div> 
    ); 
    } 
} 

这是一个很常见的反应模式。

关于您的jQuery示例的旁注：您在此处所做的所有操作都可以使用“vanilla”JS轻松完成，无需jquery。