如何解决带有 Rails6 / Webpacker 的独立 React 组件
我想知道如何/[接受的方式] 使用 webpacker 将独立的 React 组件添加到 rails 中的特定页面。用例是我有一个 Rails6 应用程序,我打算将 Rails 功能用于视图,而不是完整的 React SPA。但是,我想在特定 rails 视图中使用特定的自定义反应组件。该应用已安装并配置了用于响应的 webpacker。
我的问题:
- react-rails 是否适合这种用法?我曾尝试使用它,它确实完美地填充了用例,但我想知道是否可以在不添加此 gem 的情况下完成它,因为它似乎 webpacker 本身具有反应支持。
- 是否要求 webpacker
<%= javascript_pack_tag =>
应该始终进入应用程序布局(head 标记),并像示例所说的那样动态地将包渲染到正文的末尾(appendChild
)?我宁愿在视图中包含 pack 标签,并将其直接呈现到我指定的 div 中。 (下面的代码) - 如何将反应道具发送到由
<%= javascript_pack_tag =>
呈现的独立反应组件?是否必须编写组件以获取挂载时所需的任何数据?
我尝试过的事情:
- 我查看了 webpacker 的文档,使用关键字“standalone”和“react”找到了很多问题,但没有找到任何问题。
- 下面的示例项目:它有效..但我不确定这是否是正确的方法,我不确定如何解决上面的问题 3(关于传递道具)
初始化
rails new petstore --webpack=react
bin/rails generate scaffold Pet pet_type:string pet_name:string
bin/rails db:migrate
package.json
{
"name": "petstore","private": true,"dependencies": {
"@babel/preset-react": "^7.12.10","@rails/actioncable": "^6.0.0","@rails/activestorage": "^6.0.0","@rails/ujs": "^6.0.0","@rails/webpacker": "5.2.1","babel-plugin-transform-react-remove-prop-types": "^0.4.24","prop-types": "^15.7.2","react": "^17.0.1","react-dom": "^17.0.1","turbolinks": "^5.2.0"
},"version": "0.1.0","devDependencies": {
"webpack-dev-server": "^3.11.2"
}
}
config/webpacker.yml
default: &default
source_path: app/javascript
source_entry_path: packs
public_root_path: public
public_output_path: packs
cache_path: tmp/cache/webpacker
webpack_compile_output: true
# Additional paths webpack should lookup modules
# ['app/assets','engine/foo/app/assets']
additional_paths: []
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
# Extract and emit a css file
extract_css: false
static_assets_extensions:
- .jpg
- .jpeg
- .png
- .gif
- .tiff
- .ico
- .svg
- .eot
- .otf
- .ttf
- .woff
- .woff2
extensions:
- .jsx
- .mjs
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
hmr: false
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
pretty: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: '**/node_modules/**'
test:
<<: *default
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
production:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Extract and emit a css file
extract_css: true
# Cache manifest.json for performance
cache_manifest: true
app/javascript/components/PetAnimation.js
import React from "react";
import PropTypes from "prop-types"
class PetAnimation extends React.Component {
constructor(props) {
super(props);
this.state = {
petType: props.petType,};
}
render() {
return (
<div>Cute Pet Animation based on Pet Type and other imported libraries</div>
)
}
}
PetAnimation.propTypes = {
petType: PropTypes.string
};
export default PetAnimation;
app/javascript/packs/pet_animation.js
import React from 'react'
import ReactDOM from 'react-dom'
import PetAnimation from "../components/PetAnimation";
document.addEventListener('DOMContentLoaded',() => {
const rootElement = document.getElementById("pet-animation");
if (rootElement != null) {
ReactDOM.render(<PetAnimation/>,rootElement)
}
})
app/views/pets/show.html.erb
<p id="notice"><%= notice %></p>
<p>
<strong>Pet type:</strong>
<%= @pet.pet_type %>
</p>
<p>
<strong>Pet name:</strong>
<%= @pet.pet_name %>
</p>
<p>
<%= javascript_pack_tag 'pet_animation','data-turbolinks-track': 'reload' %>
<div id="pet-animation"></div>
</p>
<%= link_to 'Edit',edit_pet_path(@pet) %> |
<%= link_to 'Back',pets_path %>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。