Question

我正在尝试React Native和React组件的功能，如getInitialState和componentDidMount正在破坏。例如，我试过：

getInitialState: function() {
    return {
      movies: null,
    };
  },

破了。

当我把es6等效，即：

constructor(props) {
    super(props);
    this.state = {
      movies: null,
    };
}

程序运行正常。处理此问题的最佳方法是什么，以便我能够使用教程中提到的React函数而不是将它们转换为es6？

谢谢！

Answer 1

我无法看到您的代码，看看您的组件是如何创建的，但我想我知道这里发生了什么。

如果您将组件设置为类：

class MyComponent extends React.Component {

}

您只能使用构造函数来设置初始状态：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      movies: null,
    };
  }

  render() {
    return <View />
  }
}

如果使用React.createClass设置组件，则只能使用getInitialState设置初始状态：

var MyComponent = React.createClass({
  getInitalState: function() {
    return {
      movies: null,
    }
  },
  render: function() {
    return <View />
  }
})

所有其他生命周期方法应该相同。请注意，如果您正在使用类，则在类中的每个函数后面加一个逗号会破坏您的应用程序。

例如，这会破坏：

class MyComponent extends React.Component {
  componentDidMount() {
    console.log("mounted")
  }, // <- No comma necessary
  render() {
    return <View />
  }
}

这有效：

class MyComponent extends React.Component {
  componentDidMount() {
    console.log("mounted")
  }
  render() {
    return <View />
  }
}

使用React.createClass的情况恰恰相反。你需要用逗号分隔你的函数：

这会破坏：

var MyComponent = React.createClass({
  componentDidMount: function() {
     console.log("mounted")
  } // <- Needs a comma here.
  render: function() {
    return <View />
  }
})

这有效：

var MyComponent = React.createClass({
  componentDidMount: function() {
     console.log("mounted")
  },
  render: function() {
    return <View />
  }
})

功能打破反应原生教程

1 个答案: