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

React版本：0.14-rc1

如果指出我的错误并为此解决问题，我将非常感激。非常感谢。

Answer 1

首先，this.children应为this.props.children。（注意，如果您动态传递子项，则需要记住只传递1个子项不会产生数组，因为传递多个子项时因此this.props.children.map()不会起作用。）

其次，this.props和简洁this.context不会在 类的构造函数中填充，除非 您正在传递{{ 1}}同时props和constructor。因此，无论是传递它们还是将其移出构造函数都是可行的方法。

super

第三，在不知道class MyComponent extends React.Component { constructor(props) { super(props); this.state = { active: this.props.active || 0 } } }是什么的情况下，如果您修复上述内容，您的代码应该可以正常工作。

最后，只是作为品味和偏好的问题，而不是用Link.handleClick乱丢你的代码，你可以在定义方法时直接绑定它。

this.someMethodOnMyReactComponent.bind(this)

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

1 个答案: