Javascript 使用未定义的属性对选项卡进行反应

我正试图建立一个反应标签

每个选项卡项都是一个

);
}
返回(

{this.props.children.map（labels.bind（this））}

);
},
_renderContent:函数（）{
返回(
{this.props.children[this.state.selected]}
);
},
渲染：函数（）{
返回(
{this.\u renderitles（）}
{this.\u renderContent（）}
);
}
});
var Pane=React.createClass({
displayName:“窗格”，
道具类型：{
标签：React.PropTypes.string.isRequired，
子项：React.PropTypes.element.isRequired
},
渲染：函数（）{
返回(
{this.props.children}
);
}
});
var App=React.createClass({
渲染：函数（）{
返回(
这是我的标签1内容！
这是我的标签2内容！
这是我的标签3内容！
);
}
});
ReactDOM.render（，document.querySelector（'.container'）；

---

但是我得到了一个错误

uncaughttypeerror:无法读取未定义的属性'number'

您得到了错误，因为

PropTypes

不再是React包的一部分<代码>反应。PropTypes为您提供

未定义的

，尝试访问上的

编号

，将导致您的错误

安装并使用

道具类型

软件包：

import PropTypes from 'prop-types';

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

import PropTypes from 'prop-types';