Rails и react - react.createclass / react.createreactclass не является функцией

Я пытаюсь использовать React в приложении Rails. Я использую Rails 5.2.1 и Ruby 2.4.1. Я также установил гем реактивные рельсы версии 2.4.4 и также пробовал в 2.4.7. у меня есть

sites_controller.rb

class SitesController < ApplicationController

  def index
  end
end

просмотры / сайты / index.html.erb

<%= react_component 'Main' %>

приложение / активы / javascripts / компоненты / _main.js.jsx

var Main = React.createReactClass({
render() {
 return (
      <div>
        <Header />
      </div>    
   )
  }
})

приложение / активы / javascripts / компоненты / _header.js.jsx

var Header = React.createReactClass({
 render() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

});

Сначала я попробовал createClass, и, поскольку он не работал, а в некоторых ссылках говорилось, что createClass был удален из React JS v16, я попробовал createReactClass. Я получаю следующую ошибку

  Uncaught TypeError: React.createReactClass is not a function
at _header.self- 
(anonymous) @ _header.self- 
 f50926322cbfc16ac78826d5bfa8a3f192af29cac5125c3955f9bef3355b54d9.js? 
  body=1:1
_main.self-1ed2e3a6d11c77d50ab4dd84f59f619d3ae85141ee36949c34885bb6b90992c4.js?body=1:1 Uncaught TypeError: React.createClass is not a function
at _main.self-1ed2e3a6d11c77d50ab4dd84f59f619d3ae85141ee36949c34885bb6b90992c4.js?body=1:1
(anonymous) @ _main.self-1ed2e3a6d11c77d50ab4dd84f59f619d3ae85141ee36949c34885bb6b90992c4.js?body=1:1
  react_ujs.self-eb4e9994228856e343ab49d1aed6c23046bf4308ea6d46395e5c39170ab3e56f.js?body=1:313 Uncaught Error: Cannot find component: 'Main'. Make sure your component is available to render.
    at Object.mountComponents (react_ujs.self-eb4e9994228856e343ab49d1aed6c23046bf4308ea6d46395e5c39170ab3e56f.js?body=1:313)
    at HTMLDocument.ReactRailsUJS.handleMount (react_ujs.self-eb4e9994228856e343ab49d1aed6c23046bf4308ea6d46395e5c39170ab3e56f.js?body=1:350)
    at Object.e.dispatch (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6)
    at r.notifyApplicationAfterPageLoad (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7)
    at r.pageLoaded (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7)
    at turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6
0
0
691
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Похоже, это проблема версии. Мне пришлось использовать следующий синтаксис, чтобы это заработало.

class Main extends React.Component{
  render() {
    return (
      <div>
        <Header />
      </div>    
    )
  }
}
Ответ принят как подходящий

Соответствующие документы здесь:

https://reactjs.org/docs/react-without-es6.html

Обычно вы определяете компонент React как простой класс JavaScript:

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

Если вы еще не используете ES6, вы можете использовать вместо него модуль create-response-class:

var createReactClass = require('create-react-class');
var Greeting = createReactClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

API классов ES6 похож на createReactClass () за некоторыми исключениями.

Другие вопросы по теме