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

Posted 2023-03-22

【中文标题】如何在 Rails 中使用来自 npm 的反应组件

【英文标题】：How use react components from npm in rails

【发布时间】：2017-01-24 12:39:03

【问题描述】：

我是 react 新手，我关注这篇文章 https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers 在 Rails 应用程序中使用反应，一切都很好。但后来我想包含在records.html页面summernote（所见即所得的html编辑器）中。我找到了这个 npm 模块 react-summernote 并且无法使编辑器工作。

这是我的代码（尝试 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、未定义、布尔值或数字。它应该是一个字符串（对于 DOM 元素）或一个 ReactClass（对于复合组件）。检查Constructor的渲染方法。

【参考方案1】：

一些值得检查的事情；

我假设您的节点包正在安装到/node_modules/*。确保将这些包添加到您的资产管道中。我已经使用browserify 来完成此操作。

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

如果您已经走到了这一步，但仍然卡住，我建议您在不使用 react-rails 的情况下触发渲染。通过 vanilla javascript 渲染页面的组件 onload 很容易，如果是 react-rails gem 导致您出现问题，则可以使用类似这样的方式轻松导航；

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

【讨论】：

非常感谢：“在浏览器控制台中检查是否正在设置变量（只需键入 ReactSummernote。如果正确导入，结果应该是一个函数，或者如果存在则未定义有问题）。”