使用材料UI在铁轨上进行反应7

发布于 2025-02-08 19:31:08 字数 2606 浏览 2 评论 0原文

我目前正在与Rails上的反应“正确的方式”，也就是使用导入地图由DHH 。我不想自己创建所有内容，而是想使用材料的组件。

因此，我已经运行./ bin/importMap PIN react react react-dom htm和我的importmaps.rb文件看起来像：

#standard stuff, turbo rails etc.
...
pin_all_from "app/javascript/components", under: "components"
pin "htm", to: "https://ga.jspm.io/npm:[email protected]/dist/htm.module.js"
pin "react", to: "https://ga.jspm.io/npm:[email protected]/index.js"
pin "react-dom", to: "https://ga.jspm.io/npm:[email protected]/index.js"
pin "process", to: "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/process-production.js"
pin "scheduler", to: "https://ga.jspm.io/npm:[email protected]/index.js"

javascripts/coptents我有

//htm_create_element.js
import { createElement } from "react"
import htm from "htm"
export default htm.bind(createElement)

而且

//index.js
import { render } from "react-dom"
import h from "components/htm_create_element"

render(
    h`<h1> Hi from HTM</h1>`,
    document.getElementById("root")
)

一切都可以（即使有手工制作的时钟组件）并正确显示。然后，我想开始使用材料组件，因此我运行./ bin/importMap pin @mui/材料，它在我的importmap.rb file中添加了约200行这个数量有意义吗？）。接下来，我尝试了一个空的等级组件，可以看到在这里。因此，现在，我的index.js是

import { render } from "react-dom"
import h from "components/htm_create_element"

import Rating from "@mui/material/Rating"


render(
    h`<h1> Hi from HTM</h1> <${Rating} name="no-value" value={null} />`,
    document.getElementById("root")
)

，但没有显示任何内容（没有组件），而DevTools Console为我提供了

未介绍的参考：未定义的过程在Chainproptypes（链proptypes.js：2：7）在ElementAcceptingRef.js：47：29

关于出了什么问题的想法？

原文

I'm currently toying around with react on rails "the proper way", AKA using import maps as exemplified by DHH. Instead of creating everything by myself, I want to use material's components.

So, I have run ./bin/importmap pin react react-dom htm and my importmaps.rb file looked like:

#standard stuff, turbo rails etc.
...
pin_all_from "app/javascript/components", under: "components"
pin "htm", to: "https://ga.jspm.io/npm:[email protected]/dist/htm.module.js"
pin "react", to: "https://ga.jspm.io/npm:[email protected]/index.js"
pin "react-dom", to: "https://ga.jspm.io/npm:[email protected]/index.js"
pin "process", to: "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/process-production.js"
pin "scheduler", to: "https://ga.jspm.io/npm:[email protected]/index.js"

under javascripts/components I have

//htm_create_element.js
import { createElement } from "react"
import htm from "htm"
export default htm.bind(createElement)

and

//index.js
import { render } from "react-dom"
import h from "components/htm_create_element"

render(
    h`<h1> Hi from HTM</h1>`,
    document.getElementById("root")
)

It was all okay (even with a hand-made clock component) and properly shown. Then, I wanted to start using material components, so I ran ./bin/importmap pin @mui/material which added about 200 lines to my importmap.rb file (does this amount make any sense?). Next, I tried addind an empty Rating component, as can be seen here. So now, my index.js is

import { render } from "react-dom"
import h from "components/htm_create_element"

import Rating from "@mui/material/Rating"


render(
    h`<h1> Hi from HTM</h1> <${Rating} name="no-value" value={null} />`,
    document.getElementById("root")
)

but nothing shows (no component is rendered) and devtools console gives me