尝试将所有组件更改为es6

• 我正在尝试将所有组件更改为 es6
• 我做了两个，但不知道第三个该怎么做。
• 你能告诉我如何改变它吗？

• 下面提供我的代码。

  export default class FirstTimeTab extends React.Component{
  
    getInitialState(){
      return {
         'panes' : [
  
          <div className="sports-tab-content">
              <p className="sports-large-text ft-day1 ft-day2">
  

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

更新了小提琴 https://jsfiddle.net/9e767txs/64/

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

这给你留下了

class FirstTimeTab extends React.Component {
  ...

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

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

这是完全正确的，因为你改变了App to FirstTimeTab。 更改后使用<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">
       ...

最后，在正确显示内容之前，您仍然看不到任何内容。您正在设置的内容content每个的属性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>
     ...

编辑跟进：

您已经使用这些代码指定了所需的属性：

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

例如，上面指出您需要label and children为了Pane.

如果你的错误是所需道具content没有指定在Pane，这意味着您需要在代码中的某个位置content作为属性。在我上面的回答中，我建议您不要将内容传递给content来传递它通过children财产。如果您遵循该建议，只需删除导致此要求的行即可。它应该看起来像我上面添加的代码段，尽管我在你原来的小提琴中没有看到任何证据。也许这是你后来添加的东西。