Rails 和 React - React.createClass / React.createReactClass 不是函数 [重复]

Question

我正在尝试在 Rails 应用程序中使用 React。我正在使用 Rails 5.2.1 和 Ruby 2.4.1。我还安装了 react-rails gem 版本 2.4.4 并在 2.4.7 中进行了尝试。我有一个

sites_controller.rb

class SitesController < ApplicationController

  def index
  end
end

视图/站点/index.html.erb

<%= react_component 'Main' %>

app/assets/javascripts/components/_main.js.jsx

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

app/assets/javascripts/components/_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

Answer 1

这似乎是版本问题。我必须使用以下语法才能使其正常工作。

class Main extends React.Component{
  render() {
    return (
      <div>
        <Header />
      </div>    
    )
  }
}

Answer 2

相关文档在这里：

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-react-class 模块来代替：

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

ES6 类的 API 与 createReactClass() 类似，但有一些例外。