如何使用来自npm的反应组件在导轨中

问题描述：

我是新的反应，我按照这篇文章https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers 在rails应用程序中使用反应，一切都很好。但后来我想包括在records.html页summernote（所见即所得的html编辑器）。我发现这个npm模块react-summernote并且不能编辑器工作。如何使用来自npm的反应组件在导轨中

这是我的代码（试行1）：

的application.js

var ReactSummernote= window.ReactSummernote = global.ReactSummernote = require('react-summernote');

index.html.erb

<%= react_component 'ReactSummernote'%>

这是我的代码（尝试2）：

summernote.js.coffee

@RichTextEditor = React.createClass 
    render: -> 
    React.createElement ReactSummernote

index.html.erb

<%= react_component 'RichTextEditor'%>

，并得到这个错误

react.self-e3251ec ... .js？body = 1：1285警告：React.createElement：类型不应该为null，undefined，boolean或number。它应该是一个字符串（用于DOM元素）或ReactClass（用于复合组件）。检查Constructor的渲染方法。

答

有些事情值得检查;

我假设您的节点软件包正在安装到/node_modules/*。确保将这些软件包添加到您的资产管道中。我用browserify来实现这一点。

检查您的浏览器控制台是否正在设置变量（只需键入ReactSummernote。如果导入正确，结果应该是函数，如果有问题，结果应该是未定义的）。

如果你已经得到这么多并仍然卡住，我会建议在不使用react-rails的情况下触发渲染。通过vanilla javascript呈现页面的组件是很容易的，如果它是导致问题的react-rails gem，那么这将很容易地用这样的东西导航;

ReactDOM.render(
    <h1>Hello, world!</h1>, 
    document.getElementById('example') 
);

如何使用来自npm的反应组件在导轨中

相关推荐