个人中心
gpt4 book ai didi

javascript - 为什么这不起作用(没有 Node 的 React)？

转载 作者：行者123 更新时间：2023-11-28 03:18:00 25 4
gpt4 key购买 nike

我试图让这项工作成功:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>

    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>

    <!-- We will put our React component inside this div. -->
    <div id="like_button_container"></div>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

    <!-- Load our React component. -->
    <script src="like_button.js"></script>

  </body>
</html>

这是 like_button.js:

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

但是组件(按钮)没有出现，这是来自此站点:

https://reactjs.org/docs/add-react-to-a-website.html

请帮我解决这个问题，就像它无法识别该脚本一样。

最佳答案

这里的问题是您直接从硬盘驱动器将页面作为文件运行，which is preventing external scripts (如react、react-dom)从下载。这意味着 React 永远不会下载且未定义，这反过来会破坏您的 like_button.js 脚本。

与其直接从硬盘上运行 HTML 页面，不如尝试通过服务器运行页面 - 如果安装了节点，则可以安装基本的 http server通过:

npm install -g http-server

完成后，从包含 html 页面的目录运行以下命令:

http-server

然后控制台将在控制台中显示服务器的地址。在网络浏览器中导航到该地址将显示索引页或目录列表。导航到您正在开发的 html 页面，您应该会发现一切都按预期工作。

更新

或者，如果您使用基于 chromium 的浏览器(并且无法安装 node)，则可以安装此浏览器扩展以在系统上运行本地网络服务器:

Web Server for Chrome

安装后，您可以从硬盘上存储项目的目录安装并启动服务器(基本上通过浏览器扩展运行)，然后导航到 http://127.0.0.1: 8887 访问您的页面。

希望有帮助!

关于javascript - 为什么这不起作用(没有 Node 的 React)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59465301/

25 4 0
文章推荐： c++ - 使用 C++ 拆分字符串
文章推荐： javascript - 如何在循环执行时逐渐将内容附加到 div？
文章推荐： c++ - 继承类结构是什么样的？
文章推荐： css - 使用 css 创 build 计
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com