Question

我正在尝试将所有组件更改为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">

Answer 1

this在该方法中不可用..当您在第60行拨打this.changeContent时，请将其更改为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

Answer 2

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

Updated Fiddle

首先，从export default移除export default class FirstTimeTab extends React.Component。在单文件小提琴中工作时，这不是必要的，就像我们在这里一样。

离开你了

class FirstTimeTab extends React.Component {
  ...

从那里运行会出现App未定义的控制台错误：

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

这是完全正确的，因为您已将App更改为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的{{1}}属性中设置了内容，而其他代码似乎希望将其作为Pane传递（这是React中更正确的方式））：

children

编辑后续行动：

您已经使用这些代码指定了必需的道具：

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和children。

如果您的错误 Pane 中未指定必需的道具content，则表示代码中的某处需要Pane作为属性。在上面的回答中，我建议您从content中的内容传递到通过content属性。如果您遵循该建议，只需删除导致此要求的行。它应该看起来像我上面添加的代码片段，尽管我在原始的小提琴中没有看到相同的证据。也许这是你后来添加的东西。

尝试将所有组件更改为es6

2 个答案: