将 React 组件添加到 vanilla JS 文件答案

【问题标题】：Adding a react component to a vanilla JS file将 React 组件添加到 vanilla JS 文件
【发布时间】：2021-03-19 15:05:13
【问题描述】：

我目前的目标是使用 npm 模块 https://react-open-weather.gitbook.io/project/ 使天气小部件工作。这是一个 React 组件，这是我以前从未使用过的。

我采用了 npm 模块提供的 CDN，但除此之外，我不知道如何以某种方式“启用”我的 JS 文件以读取 React 组件，或者我如何集成它。我之前尝试过这个链接 (https://reactjs.org/docs/add-react-to-a-website.html) 来在这里提问，但是东西开始出现问题（参见下面的代码 sn-p）。

问题是我不知道如何使用 React 我设法搞砸了。这就是我现在求助于你的原因：任何有 React 经验的人可以在这里帮助我吗？

以下 react 组件是我需要按城市名称加载今日天气数据的方式：

<ReactWeather
    forecast="today"
    apikey="bdb591c14b9e4a079623b1a838313888"
    type="city"
    city="Copenhagen"
/>

我的项目是用 vanilla JS 构建的，所以我需要帮助将这个组件集成到我的文件中。

<head>
    <link rel="stylesheet" 
        href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather- 
        icons.min.css" 
        type="text/css"/>
    </head>

    <body>
        <section id="weather">
            <div class="weather_component_container"></div>
        </section>
    
    <!-- npm module for weather -->
    <script src="node_modules/react-open-weather/lib/js/ReactWeather.js"></script>
    <!-- Load React -->
    <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>
    <!-- Load our React component -->
    <script src="weather.js"></script>

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

我从https://reactjs.org/docs/add-react-to-a-website.html 获得以下启动代码并将其替换为我的 DOM 元素，即 #weather

这是我在控制台中得到的错误：““数据”参数必须是字符串、缓冲区、TypedArray 或 DataView 类型之一。接收到的类型对象”

weather.js

'use strict';

React.createElement(ReactWeather, {
    forecast: "today",
    apikey: "bdb591c14b9e4a079623b1a838313888",
    type: "city",
    city: "Copenhagen"
});

ReactDOM.render(
    document.getElementById('weather')
);

【问题讨论】：

reactjs.org/docs/… 试试这个步骤来使用jsx组件。
@StefanWang 请在我问题的最后部分查看更新后的代码 sn-p 和控制台错误

标签： javascript reactjs api widget weather

【解决方案1】：

默认情况下，JavaScript 不理解 JSX 语法。你可能会错过这个文件： https://reactjs.org/docs/add-react-to-a-website.html#quickly-try-jsx

请添加脚本并重试

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

注意：请勿在生产环境中使用此脚本，因为它可能会降低您的应用速度。要在生产中使用，请参考文档https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project

【讨论】：

嗨帕特，感谢您的意见。我已经阅读了这篇文章并运行了命令，但我仍然不明白为什么我的 React 组件会在控制台中引发错误。我是否必须将其编写为与上面代码 sn-p 中的不同？