javascript - render() 没有在 this.setState() 上被调用

Question

我有一个简单的导航链接组件，在容器/展示类(智能/哑)中分开，如下所示:

我的演示组件:

import React, { PropTypes } from 'react';

class Navigation extends React.Component {

    componentWillReceiveProps() {
        console.log("here bro componentWillReceiveProps");
    }

    render() {
        console.log(this.props);
        var self = this;
        return (
            <div>
                <ul>
                    {
                        this.props.items.map( (m, index) => {
                            var style = '';

                            console.log("index", index, "focus", self.props.focused);
                            if(self.props.focused == index){
                                style = 'focused';
                            }
                            return <li key={Math.random()} className={style} onClick={self.props.clickHandler.bind(this, index)}>{m}</li>;
                        })
                    }
                </ul>

                <p>Selected: {this.props.items[this.props.focused]}</p>
            </div>
        );
    }
}

export default Navigation;

我的容器组件:

import React, {PropTypes} from 'react';
import Nav from '../components/Navigation';

class NavigationContainer extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            focused : 0
        };
    }

    clicked(index) {
        this.setState({focused: index}, function () {
            console.log("set to", this.state.focused);
        });
    }

    render() {
        return (
            <Nav items={['Home', 'About', 'Contact Us']} clickHandler={this.clicked} focused={this.state.focused}/>
        );
    }
}

NavigationContainer.propTypes = {};
export default NavigationContainer;

当单击任何项​​目(主页、联系我们...等)并修改状态时，不会再次调用 render() 方法，因此传递给dumb组件的 Prop 是最新的。我的理解是，当状态发生变化时，将调用 render() 。我在这里做错了什么？

Answer 1

当您使用 ES2015 类语法扩展 React.Component 时，您需要将操作处理程序绑定(bind)到类的上下文中。

试试这个:

render() {
        return (
            <Nav items={['Home', 'About', 'Contact Us']} clickHandler={index => this.clicked(index)} focused={this.state.focused}/>
        );
    }

通常，最好不要在 render 中使用箭头函数或 bind 方法，因为它会在任何 render 上生成函数的新副本称呼。将函数声明移至类构造函数。

在这种情况下，我个人更喜欢使用箭头函数作为类属性

class MyClass extends React.Component {

  handleClick = () => {
    // your logic
  };

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

它不是 ES2015 规范的一部分，而是 babel stage-0 preset支持这种语法

您可以在 this article 中阅读更多关于 React 中的上下文绑定(bind)的信息