反应带有未定义属性的选项卡

Question

我正在尝试构建一个反应选项卡。

每个选项卡项都是一个<a> 元素，但是没有绑定点击事件。我通过添加一个 handleClick 方法来绑定它们，该方法使用 preventDefault() 来停止单击时 # 弹跳。然后我可以使用 this.setState() 更新所选项目，方法是使用

分配点击的索引

onClick={this.handleClick.bind(this, index, child)}

当 this.state.selected 值等于当前单击元素的索引时，三元运算符允许我有条件地将“活动”字符串分配为 className。

var Tabs = React.createClass({
    displayName: 'Tabs',
    propTypes: {
    selected: React.PropTypes.number,
    children: React.PropTypes.oneOfType([
      React.PropTypes.array,
      React.PropTypes.element
    ]).isRequired
  },
  getDefaultProps: function () {
    return {
        selected: 0
    };
  },
  getInitialState: function () {
    return {
        selected: this.props.selected
    };
  },
  shouldComponentUpdate(nextProps, nextState) {
    return this.props !== nextProps || this.state !== nextState;
  },
  handleClick: function (index, event) {
    event.preventDefault();
    this.setState({
        selected: index
    });
  },
  _renderTitles: function () {
    function labels(child, index) {
        var activeClass = (this.state.selected === index ? 'active' : '');
        return (
        <li key={index}>
            <a href="#" 
            className={activeClass}
            onClick={this.handleClick.bind(this, index)}>
            {child.props.label}
          </a>
        </li>
      );
    }
    return (
        <ul className="tabs__labels">
        {this.props.children.map(labels.bind(this))}
      </ul>
    );
  },
  _renderContent: function () {
    return (
        <div className="tabs__content">
            {this.props.children[this.state.selected]}
      </div>
    );
  },
    render: function () {
    return (
        <div className="tabs">
        {this._renderTitles()}
        {this._renderContent()}
      </div>
    );
  }
});

var Pane = React.createClass({
    displayName: 'Pane',
  propTypes: {
    label: React.PropTypes.string.isRequired,
    children: React.PropTypes.element.isRequired
  },
    render: function () {
    return (
        <div>
        {this.props.children}
      </div>
    );
  }
});

var App = React.createClass({
    render: function () {
    return (
        <div>
        <Tabs selected={0}>
          <Pane label="Tab 1">
            <div>This is my tab 1 contents!</div>
          </Pane>
          <Pane label="Tab 2">
            <div>This is my tab 2 contents!</div>
          </Pane>
          <Pane label="Tab 3">
            <div>This is my tab 3 contents!</div>
          </Pane>
        </Tabs>
      </div>
    );
  }
});

ReactDOM.render(<App />, document.querySelector('.container'));

但我收到一个错误Uncaught TypeError: Cannot read property 'number' of undefined

Answer 1

您收到错误是因为 PropTypes 不再是 React 包的一部分。 React.PropTypes 给你undefined，尝试访问number 会导致你的错误。

安装并改用prop-types 包：

import PropTypes from 'prop-types';