React-Rails Неожиданная ошибка Token для любой функции, кроме render()

Question

Я получаю непредвиденную ошибку маркера при каждом добавлении функции до render().

Например:

var App = React.createClass({ 

    constructor() { 
    super(); 

    this.state = { 
     notebooks: {} 
    }; 
    } 

    render: function() { 
    return (
     <div style={{"height": "100%"}}> 
     <NotebookNav notebooks={this.props.notebooks}></NotebookNav> 
     <Technique></Technique>  
     </div> 
    ); 
    } 
}); 

Этот компонент отлично компилируется, когда я удаляю функцию constructor(), но с constructor(), он бросает неожиданный маркер ошибки, указывающий на render: function(). У кого-нибудь есть идеи о том, как это исправить?

Answer 1

Здесь вы вводите в заблуждение синтаксис. createClass принимает объект как аргумент, а не класс ES6. Объектам нужны запятые, разделяющие элементы. Кроме того, простые объекты не имеют конструктора, подобного классу. В РЕАКТ объекта спецификации createClass вы, вероятно, хотите getInitialState вместо

React.createClass({ 
    getInitialState() { 
    return { notebooks: {} } 
    }, // <--- comma 
    render() {...} 
}) 

вы могли бы, однако переписать всю вещь, используя класс ES6 (который не имеет запятых отделяя методы.

class App extends React.Component { 
    constructor() { 
    super(); 

    this.state = { 
     notebooks: {} 
    }; 
    } // <--- no comma 

    render() { 
    return (
     <div style={{"height": "100%"}}> 
     <NotebookNav notebooks={this.props.notebooks}></NotebookNav> 
     <Technique></Technique>  
     </div> 
    ); 
    } 
} 

Answer 2

Да, это потому, что вы не разделяя функции с запятой. Вы должны написать это

var App = React.createClass({ 

getInitialState: function() { 
    return { 
    notebooks: {} 
    }; 
}, 

render: function() { 
    return (
    <div style={{"height": "100%"}}> 
     <NotebookNav notebooks={this.props.notebooks}></NotebookNav> 
     <Technique></Technique>  
    </div> 
); 
} 
}); 

также должны быть this.state.notebooks не this.props.notebook