如何在只有react-rails gem的rails应用程序中使用供应商React模块/组件?

时间:2017-07-01 16:17:59

标签: javascript ruby-on-rails reactjs

使用this评论,我试图在我的rails应用程序中使用Draft.js。

但我经常收到错误:

Draft.min.self-b1d4414….js?body=1:1 Uncaught ReferenceError: Immutable is not defined

有人可以说,我正在犯的可能明显的错误是什么?

详细说明:

我只使用react-rails来保持简单。 Gemfile有以下相关行:

gem 'react-rails'
gem 'bootstrap-sass'

我将Draft.min.js放在app/assets/javascripts/externallibraries/下 和Draft.css下的app/assets/stylesheets/externallibraries

相关文件application.js

/*
 //= require jquery
 //= require jquery_ujs
 //= require turbolinks
 //= require react
 //= require react_ujs
 //= require bootstrap-sprockets
 //= require react
 //= require react_ujs
 //= require externallibraries/Draft.min
 //= require components
 //= require_tree .
*/

application.css

/*
 *= require externallibraries/Draft
 *= require_tree .
 *= require_self
*/

最后我的jsx文件是:

class NewPost extends React.Component {
    constructor() {
        super();
        this.state = {
            editorState: EditorState.createEmpty()
        };
        this.onChange = (editorState) => this.setState({editorState});
    }

    componentDidMount(){
    }

    componentWillMount() {
    };

    componentWillUnmount() {
    }

    componentWillReceiveProps(nextProps) {
        if(JSON.stringify(this.props.some_field) !== JSON.stringify(nextProps.some_field) && nextProps.retrieved_data != null) // Check if it's a new user, you can also use some unique, like the ID
        {
            this.setState({some_field: nextProps.some_field});
        }
    } 

    render() {
        return (
            <div>
                {"My state is: " + JSON.stringify(this.state, null, "   ")}
                {"And my props are: " + JSON.stringify(this.props, null, "  ")}
                <Editor editorState={this.state.editorState} onChange={this.onChange} />
            </div>
        );
    }
}

1 个答案:

答案 0 :(得分:0)

这是我找到的解决方案。也许某人的某一天可以得救:

  1. 在rails项目的根目录中安装软件包。而不是使用纱线似乎更好。命令为yarn add draft-js
  2. config/application.rb中添加类中的以下行:

    config.assets.paths&lt;&lt; Rails.root.join('node_modules','draft-js','dist')

  3. app/assets/javascripts中添加以下application.js

    // = require Draft