如何将 React 组件添加到普通 HTML 中？答案

【问题标题】：How can I add react components to normal HTML?如何将 React 组件添加到普通 HTML 中？
【发布时间】：2022-11-16 09:50:57
【问题描述】：

我正在尝试制作一个网页，我想将一些 HTML 和相应的代码压缩成一个反应组件，但如果不创建一个完整的反应应用程序，我似乎无法做到这一点，这对于这个项目来说是不受欢迎的。我按照反应文档中的步骤添加了一个 JSX 预处理器，然后使用脚本标签将反应组件渲染到页面中，但没有任何显示。

在页面的控制台中，它只是显示Uncaught ReferenceError: require is not defined。我尝试使用 browserify 将所有 react 库编译到一个文件中，但它显示为 Error: Can't walk dependency graph: Cannot find module 'reactjs' from '/home/user/code/website/src/slideshow.js'。如果我尝试 npm install reactjs 它会安装 react，并且在编辑代码时既不会给出 react 类的任何定义或描述。

我有点迷茫，完全愿意看起来像个白痴。我的 HTML 和 JS 在下面。

const { React, ReactDOM } = require('react');
const root = ReactDOM.createRoot(document.getElementById("slideshowContainer"));

class Slideshow extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            slide: 1,
        }
        this.slides = {
            1: {
                src: './assets/coding.jpeg',
                caption: "this is slide 1."
            },
            2: {
                src: './assets/coding2.jpeg',
                caption: "this is slide 2."
            },
            3: {
                src: './assets/templimg.jpg',
                caption: "this is slide 3."
            }
        }
    }

    slideTransitionPrev() {
        let ok = Object.keys(this.slides);

        if (this.state.slide === 1) {
            this.setState({ slide: ok });
        } else {
            this.setState({ slide: this.state.slide - 1 });
        }
    }

    slideTransitionNext() {
        let ok = Object.keys(this.slides);

        if (this.state.slide === ok) {
            this.setState({ slide: 1 });
        } else {
            this.setState({ slide: this.state.slide + 1 });
        }
    }

    render() {
        return (
            <div class="slides fade">
                <span class="slidePosition">{this.state.slide} / {Object.keys(this.slides)}</span>
                <img style="width: 100%" src={this.slides[this.state.slide].src} />

                <button class="prev" onClick={() => this.slideTransitionPrev()}>&#10094;</button>
                <button class="next" onClick={() => this.slideTransitionNext()}>&#10095;</button>

                <span class="caption">{this.slides[this.state.slide].caption}</span>
            </div>
        )
    }
}

root.render(<Slideshow />);

(boring necessary html stuff)

<body>
    <div id="slideshowContainer"></div>

    <script src="./src/slideshow.js"></script>
</body>

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

客户端的浏览器最终必须使用纯 JavaScript。 JSX 不是普通的 JavaScript。您需要决定是要将 JSX 编译成 JavaScript（作为开发人员）还是客户端。

对于任何远程专业人士，您都应该这样做；在客户端上这样做会给客户端的设备带来很大的负载，这对某些人来说可能效果不佳，比如低端手机。自己将 JSX 处理成 JS 也允许 many other nice enhancements。我认为除了小型玩具 sn-ps 之外的任何东西都非常值得。一个常用的工具是create-react-app。

如果实在不想用那个路由，可以在客户端使用Babel Standalone把JSX转成JS，像这样：

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const App = () => {
    return 'foo';
};

ReactDOM.createRoot(document.querySelector('.react')).render(<App />);
</script>

您需要包括 React、React DOM、Babel，最后是您自己的脚本（在 <script type="text/babel"> 标记中）。

【讨论】：

【解决方案2】：

npm 用于节点 js。您不能将这些库导入到普通的 html/js 文件中。在此页面上有您需要的 javascript 文件的参考链接：https://reactjs.org/docs/add-react-to-a-website.html

【讨论】：