您有多个小错误，一个接一个，需要修复。我强烈建议您进行较小的更改，以便您可以更轻松地跟踪开发过程中出现的问题。

更新的小提琴

首先，export default从export default class FirstTimeTab extends React.Component. 在像我们在这里所做的那样在单文件 Fiddle 中工作时，这不是必需的。

那给你留下

class FirstTimeTab extends React.Component {
  ...

从那里运行会给你一个App未定义的控制台错误：

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

这是完全正确的，因为您更改App为FirstTimeTab. 将此更改为 use 后<FirstTimeTab />，您将收到另一个有用的控制台错误：

> getInitialState was defined on FirstTimeTab, a plain JavaScript class. This is
only supported for classes created using React.createClass. Did you mean to
define a state property instead?

此消息是很清楚的：你不能使用getInitialState与class语法。相反，更改为在 中设置初始state属性的更清晰的方法constructor：

constructor() {
  super();
  this.state = {
    'panes' : [
       <div className="sports-tab-content">
       ...

最后，在正确显示内容之前，您仍然看不到任何内容。您在contenteach的属性中设置了内容，Pane而您的其余代码似乎希望将其作为传递children（这是 React 中更正确的方式）：

render () {
  return (
    <Tabs selected={0} changeContent={this.changeContent}>
      <Pane label="Account Setup" subtitle="Days 1 and 2" liClass="sports-setup-ico first-time-active ft-active-tab">
        {this.state.panes[0]} // Content passed as children
      </Pane>
     ...

编辑跟进：

您一直在使用以下代码指定所需的props：

Pane.propTypes = {
  label: React.PropTypes.string.isRequired,
  children: React.PropTypes.element.isRequired
};

例如，上述说明您需要 alabel和children用于Pane.

如果您的错误是Required propcontentPane is not specified in，这意味着您需要在代码中的某处content作为属性。在我上面的回答中，我建议您从传递内容切换content到通过children属性传递。如果您遵循该建议，只需删除导致此要求的行。它应该看起来像我上面添加的那段代码，尽管我在你的原始 Fiddles 中没有看到这方面的证据。也许这是你后来添加的东西。

this在该方法中不可用.. 当您this.changeContent在第 60 行调用时将其更改为this.changeContent.bind(this). 这会将您的组件实例绑定到该方法。

如果您想通过this.changeContent = this.changeContent.bind(this)在构造函数中添加 以下内容super(props)，您也可以在构造函数中执行此操作，然后您可以使用该方法

可以bind在这里阅读更多关于https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind