我正试图建立一个React部件图书馆。 目标是把他们称之为:

    <div id="testreact"></div>
    <div id="testreact2"></div>
    <script>
        MyLib.ReactDOM.createRoot(document.getElementById( testreact )).render(
            MyLib.ButtonShowdown(),
        )
        MyLib.ReactDOM.createRoot(document.getElementById( testreact2 )).render(
            MyLib.DrawerShowdown(),
        )
    </script>

ButtonShowdown工程是正确的。

提炼公司利用React.useState公司,但我收到的错误是“Cannot读作(翻新使用国)”在 con体内。

The build is done in Vite using this configuration:`

    import { defineConfig } from  vite 
    import { resolve } from  path ;
    import react from  @vitejs/plugin-react-swc 

    export default defineConfig({
    define: {
         process.env : process.env
    },
    plugins: [react()],
    build: {
        lib: {
            entry: resolve(__dirname,  页: 1 ),
            name:  MyLib ,
            fileName:  my-lib ,
            formats: [ iife ]
        }
    },
    })

页: 1

    import ReactDOM from  react-dom/client 
    import ButtonShowdown from "../src/ButtonShowdown";
    import DrawerShowdown from "../src/DrawerShowdown"

    export {
        ReactDOM,
        ButtonShowdown,
        DrawerShowdown,
    };

许多人似乎已经解决了这一问题,将React and ReactDOM排除在图书馆之外,但这也造成ButtonShowdown工作。

尽管我认为这可能是多余的,但我却为各组成部分提供了法典:

import React from  react 
    import { Button } from "@mui/material";
    import Base from "./Base";

    function ButtonShowdown(){
        return (
            <Base>
                <div>Showdown:</div>
                <Button variant="text">Text</Button>
                <Button variant="contained">Contained</Button>
                <Button variant="outlined">Outlined</Button>
            </Base>
        )
    }

    export default ButtonShowdown;



    import React from  react ;
    import Box from  @mui/material/Box ;
    import Drawer from  @mui/material/Drawer ;
    import Button from  @mui/material/Button ;
    import List from  @mui/material/List ;
    import Divider from  @mui/material/Divider ;
    import ListItem from  @mui/material/ListItem ;
    import ListItemButton from  @mui/material/ListItemButton ;
    import ListItemIcon from  @mui/material/ListItemIcon ;
    import ListItemText from  @mui/material/ListItemText ;
    import InboxIcon from  @mui/icons-material/MoveToInbox ;
    import MailIcon from  @mui/icons-material/Mail ;
    import Base from  ./Base ;

    function DrawerShowdown() {
    const [open, setOpen] = React.useState(false);

    const toggleDrawer = (newOpen) => () => {
        setOpen(newOpen);
    };

    const DrawerList = (
        <Box sx={{ width: 250 }} role="presentation" onClick={toggleDrawer(false)}>
        <List>
            {[ Inbox ,  Starred ,  Send email ,  Drafts ].map((text, index) => (
            <ListItem key={text} disablePadding>
                <ListItemButton>
                <ListItemIcon>
                    {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
                </ListItemIcon>
                <ListItemText primary={text} />
                </ListItemButton>
            </ListItem>
            ))}
        </List>
        <Divider />
        <List>
            {[ All mail ,  Trash ,  Spam ].map((text, index) => (
            <ListItem key={text} disablePadding>
                <ListItemButton>
                <ListItemIcon>
                    {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
                </ListItemIcon>
                <ListItemText primary={text} />
                </ListItemButton>
            </ListItem>
            ))}
        </List>
        </Box>
    );

    return (
        <Base>
        <Button onClick={toggleDrawer(true)}>Open drawer</Button>
        <Drawer open={open} onClose={toggleDrawer(false)}>
            {DrawerList}
        </Drawer>
        </Base>
    );
    }

    export default DrawerShowdown;


    import React from  react 
    import { ScopedCssBaseline, ThemeProvider, createTheme } from "@mui/material";
    import { red } from  @mui/material/colors ;


    function Base({children}){
        const baseTheme = createTheme(window.WpeaUI?.customTheme ?? {
            /*palette: {
                primary: red
            }*/
        });
        return (
            <React.StrictMode>
                <ScopedCssBaseline>
                    <ThemeProvider theme={baseTheme}>
                        {children}
                    </ThemeProvider>
                </ScopedCssBaseline>
            </React.StrictMode>
        )
    }

    export default Base;

只要我执行 n,所有东西都是正确的。 然而,在我尝试冲绳后,我就收到错误:“没有读作废(阅读使用国)的财产”。