Question

在ES5中，我可以存储这样的React类：

const myReactClasses = {
    inlineStyles : {
        ...
    },

    firstClass : React.createClass({
        myFunction : function () {
            ...
        },
    }),
}

在尝试将语法转换为ES6时，我尝试过：

const myReactClasses = {
    inlineStyles : {
        ...
    },

    firstClass : class firstClass extends React.Component {
        myFunction() {
            ...
        },
    },
}

并使用gulp进行编译。但是，当我导航到React应呈现的页面时，我遇到错误：未捕获的TypeError：无法读取未定义的属性'prototype'。这是从ES5到ES6复制相同行为的正确方法吗？我简单地搞砸了应用程序中更深层次的地方，还是错了？如果不对，请你提供一个样本片段。

Answer 1

定义myReactClasses常量之外的类。

JS语法不允许您尝试执行的操作。无论使用哪种方法，组件都应该在包含它们的对象外部的文件中定义，除非可读性除外。

Answer 2

如果您非常希望将react类作为值放入对象（没有中间变量），则可以使用非ES6语法。例子：

var createReactClass = require('create-react-class');

const myReactClasses = {
  firstClass : createReactClass({
    render: function() {
      return <h1>Hello, {this.props.name}</h1>;
    },
  }
}

ES6语法不会返回值但会创建一个变量，因此您需要这样编写：

class firstClass extends React.Component {
   myFunction() {
     render: function() {
       return <h1>Hello, {this.props.name}</h1>;
     },
   },
}

const myReactClasses = {
  firstClass : firstClass,
}

# or more simple 

const myReactClasses = {
  firstClass,
}

在JS变量中存储React类

2 个答案: