陣營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。