React JS 单向数据流混乱答案

【问题标题】：React JS one way data flow confusionReact JS 单向数据流混乱
【发布时间】：2016-09-20 14:08:04
【问题描述】：

这是我想使用 reactJS 实现的 jquery 解决方案

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();

        });
    };

我能做的是：通过使用状态和类名，我可以在该组件内的事件上更改特定组件的 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

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

以下模式对您有用吗？

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

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

【讨论】：

【解决方案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。

【讨论】：