在 ReactJs 中的按钮上切换活动类

Question

我正在尝试在 ReactJs 的按钮组中切换活动类。我遵循了某人发布的示例，但似乎无法使其正常工作。以下是我的代码：

class ButtonGroup extends React.Component {

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

    clickHandler(e) {
      var nodes = Array.prototype.slice.call( e.currentTarget.children );
      var index = nodes.indexOf( e.target );
      e.preventDefault();
      this.setState({ active: index });
    }

    render() {

      var buttons = this.children.map(function(child, i) {
        if (i === this.state.active) child.props.className += ' active';
        return child;
      }, this)

      return (
        <div className="ButtonGroup" onClick={this.clickHandler.bind(this)}>
            { buttons }
        </div>
      )
    }
}

class Nav extends React.Component {

  render() {
    return (
      <ButtonGroup>
        <a onClick={Link.handleClick} href="/profile" className="MenuLink active">Profile</a>
        <a onClick={Link.handleClick} href="/profile/works" className="MenuLink">Works</a>
        <a onClick={Link.handleClick} href="/profile/activity" className="MenuLink">Activity</a>
        <a onClick={Link.handleClick} href="/profile/following" className="MenuLink">Following <span className="FollowCount">{this.props.following}</span></a>
        <a onClick={Link.handleClick} href="/profile/followers" className="MenuLink">Followers <span className="FollowCount">{this.props.followers}</span></a>
      </ButtonGroup>
    );
  }
}

我得到的错误：

Unhandled promise rejection TypeError: Cannot read property 'active' of undefined(…)

反应版本：0.14-rc1

如果我的错误被指出并解决这个问题，我将不胜感激。非常感谢。

Answer 1

首先，this.children 应该是 this.props.children。 （注意，如果您动态传递孩子，您需要记住，仅传递 1 个孩子不会像传递多个孩子那样产生数组，因此 this.props.children.map() 不会工作。）

其次，this.props 和简洁的 this.context 不会填充到类的构造函数中除非您将props 传递给@ 987654327@ 和super。因此，要么传递它们，要么将其完全移出构造函数。

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            active: this.props.active || 0
        }
    }
}

第三，在不知道Link.handleClick 是什么的情况下，如果你修复了上述问题，你的代码应该可以工作。

最后，出于品味和偏好的考虑，您可以在定义方法时直接绑定它，而不是用this.someMethodOnMyReactComponent.bind(this) 乱扔代码。

someMethodOnMyReactComponent = (args) => {}