reactjs - 如果可能，如何将 MUI 与 Qwik 框架一起使用？

Question

我尝试了 Qwik 框架，它看起来很像 Reactjs 并使用 jsx。突然间，我想知道 MUI 等 Reactjs 库是否可以与 Qwik 框架一起使用。

我试过这段代码:

import { component$ } from "@builder.io/qwik";
import Add from "@mui/icons-material/Add";
import IconButton from "@mui/material/IconButton";

const AddToCartButton = component$(() => {
  return (
    <IconButton>
      <Add />
    </IconButton>
  );
});

export default AddToCartButton;

但是我得到了这个错误:

QWIK ERROR Code(25): Invalid JSXNode type. It must be either a function or a string. Found: {
  '$$typeof': Symbol(react.memo),
  type: {
    '$$typeof': Symbol(react.forward_ref),
    render: [Function: Component] { displayName: 'AddIcon', muiName: 'SvgIcon' }
  },
  compare: null
} Error: Code(25): Invalid JSXNode type. It must be either a function or a string. Found:
    at logError (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:4515:58)
    at logErrorAndStop (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:4521:21)
    at qError (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:4585:16)
    at Proxy.jsx (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:605:23)
    at AddToCartButton_component_4S0nJgnxzBU (/src/addtocartbutton_component_4s0njgnxzbu.js:11:55)
    at useInvoke (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:149:30)
    at E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:4676:32
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async renderSSR (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:5280:9)
    at async Proxy.renderToStream (E:\qwik\flower\node_modules\@builder.io\qwik\server.cjs:582:3)
    at async file:///E:/qwik/flower/node_modules/@builder.io/qwik/optimizer.mjs:1776:30
QWIK ERROR Code(25): Invalid JSXNode type. It must be either a function or a string. Found: Error: Code(25): Invalid JSXNode type. It must be either a function or a string. Found:
    at logError (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:4515:58)
    at logErrorAndStop (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:4521:21)
    at qError (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:4585:16)
    at Proxy.jsx (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:605:23)
    at AddToCartButton_component_4S0nJgnxzBU (/src/addtocartbutton_component_4s0njgnxzbu.js:11:55)
    at useInvoke (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:149:30)
    at E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:4676:32
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async renderSSR (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:5280:9)
    at async Proxy.renderToStream (E:\qwik\flower\node_modules\@builder.io\qwik\server.cjs:582:3)
    at async file:///E:/qwik/flower/node_modules/@builder.io/qwik/optimizer.mjs:1776:30
not rendered

Answer 1

JSX在这种情况下是 Qwik 的模板语言，但底层是不同的。它变得相似，因此您可以更轻松地从他们的 docs 中所述的 react 过渡。 .

Qwik is familiar for React developers and can be used to build any type of web site or application.

Qwik 为您需要安装和包装组件的 React 组件提供了一些适配器。

npm i -D @builder.io/qwik-react

然后用法应该类似于 example in their repo .

/** @jsxImportSource react */

import { qwikify$ } from '@builder.io/qwik-react';
import { Button } from '@mui/material';

export const App = qwikify$(() => {
  return (
    <>
      <Button variant="contained">Hola</Button>
    </>
  );
});