html - 如何将外部 React 库添加到静态 HTML 页面

Question

我在一个 js 文件中有这个：

const { motion } = require('../fmotion/node_modules/framer-motion/');

class Welcome extends React.Component {
render() {
    return

    <div>
     
        <Text>{this.props.name}</Text>
    <motion.div
        onClick={() => setIsActive(!isActive)}
        animate={{
            rotate: isActive ? 90 : 0,
        }}
        >
        </motion.div>;
            </div>
}
}

这是我的 HTML：

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>


<script src="~/js/welcome.js" type="text/babel"></script>

<script type="text/babel">
    ReactDOM.render(
        <Welcome name='Trikamscsc'/>,
        document.getElementById('root')
    );
</script>

如何将 Framer-Motion 库集成到我的静态 Html 页面中？

标签： htmlreactjs