javascript - 将 React 添加到现有页面并在 .js 中获取 URL 参数-6ren

javascript - 将 React 添加到现有页面并在 .js 中获取 URL 参数

转载作者：行者123 更新时间：2023-12-02 23:10:15

25

4

根据官方说明:

将 React 添加到网站 https://reactjs.org/docs/add-react-to-a-website.html

我创建了 test.html 内容:

<!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>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

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

  </body>
</html>

和test.js:

'use strict';

const e = React.createElement;

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

  componentDidMount() {
    axios.get(`http://localhost:4000/api/v1/cars`)
      .then(result => {
        console.log(result.data[0].make);
      })
  }

  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);

上面的代码运行良好。

我可以按“赞”按钮并查看更改，还可以使用 Axios 等库。

现在我要打开http://localhost/test.html?param1=111&param2=222并在 test.js 中获取这些 param1 和 param2 变量 - React。那可能吗？如何实现这一目标？

非常感谢

最佳答案

正如您在 ComponentDidMount 中执行 fetch 一样，您可以在同一个 lifecycle event 中检查查询参数。。建立在 link shared by @Olian04 之上，如下所示:

  componentDidMount() {
    const urlParams = new URLSearchParams(window.location.search);

    if (urlParams.has("param1")) {
      console.log(urlParams.get("param1"));
    } else {
      console.log("param1 was not found");
    }

    if (urlParams.has("param2")) {
      console.log(urlParams.get("param2"));
    } else {
      console.log("param2 was not found");
    }
  }

关于javascript - 将 React 添加到现有页面并在 .js 中获取 URL 参数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57403462/

25

4

0

文章推荐： javascript - 如何在React中创建和删除组件？

文章推荐： javascript - 使用 jquery 获取总价

文章推荐： Wordpress Rest API V2 - 如何过滤评论？

文章推荐： pagination - 计算分页的项目偏移量

c++ - 按位置查找未标记的模板选项/参数/参数
简而言之:我想从可变参数模板参数中提取各种选项，但不仅通过标签而且通过那些参数的索引，这些参数是未知的标签。我喜欢 boost 中的方法(例如 heap 或 lockfree 策略)，但想让它与 S
Excel IF 语句 3 参数参数
我可以对单元格中的 excel IF 语句提供一些帮助吗？它在做什么？对“BaselineAmount”进行了哪些评估？ =IF(BaselineAmount, (Variance/Baselin
c# - 有没有办法在异步方法中使用 out 参数？如果没有，谁能建议我如何从异步方法返回 OUT 参数？
我正在使用以下方法: public async Task Save(Foo foo,out int param) { ....... MySqlParameter prmparamID
delphi - 如何清除“运行”->“参数”菜单中的“参数”字段？
我正在使用 CodeGear RAD Studio IDE。为了使用命令行参数测试我的应用程序，我多次使用了“运行 -> 参数”菜单中的“参数”字段。但是每次我给它提供一个新值时，它都无法从“下拉
java - Integer.toString(参数) 或 toString(参数)
我已经为信用卡类编写了一些代码，粘贴在下面。我有一个接受上述变量的构造函数，并且正在研究一些方法将这些变量格式化为字符串，以便最终输出将类似于号码:1234 5678 9012 3456 截止日期:
MySql IN 参数 - 在存储过程中使用时，VarChar IN 参数 val 是否需要单引号？
MySql IN 参数 - 在存储过程中使用时，VarChar IN 参数 val 是否需要单引号？我已经像平常一样创建了经典 ASP 代码，但我没有更新该列。我需要引用 VarChar 参数吗？
javascript - 创建一个有两个参数的函数，参数 a 将是一个数组，参数 b 将在数组中查找一个元素
给出了下面的开始，但似乎不知道如何完成它。本质上，如果我调用 myTest([one, Two, Three], 2); 它应该返回元素 third。必须使用for循环来找到我的解决方案。 funct
c - long int 参数 != long int 参数
将 1113355579999 作为参数传递时，该值在函数内部变为 959050335。调用(main.c): printf("%d\n", FindCommonDigit(111335557999
java - 为什么修改了 ArrayList 参数，但没有修改 String 参数？
这个问题在这里已经有了答案: Is Java "pass-by-reference" or "pass-by-value"? (92 个回答) 关闭9年前。 public class StackOve
c - scanf(参数) == 1 vs 1 == scanf(参数) 没有区别吗？
我真的很困惑，当像 1 == scanf("%lg", &entry) 交换为 scanf("%lg", &entry) == 1 没有区别。我的实验书上说的是前者，而我觉得后者是可以理解的。 1 =
Delphi 中的 Windows API 参数 - 使用或不使用 @ 运算符传递 var 参数？
我正在尝试使用调用 SetupDiGetDeviceRegistryProperty 的函数使用德尔福 7。该调用来自示例函数 SetupEnumAvailableComPorts .它看起来像这样:
php - MySQL如何从年份(参数)、weekOfYear(参数)、时间(数据库)和dayofweek(数据库)创建时间戳？
我需要在现有项目上实现一些事件的显示。我无法更改数据库结构。在我的 Controller 中，我(从 ajax 请求)传递了一个时间戳，并且我需要显示之前的 8 个事件。因此，如果时间戳是(转换后)
ruby-on-rails - ||如何工作？ : @client = client. 查找(参数[:client_id] || 参数[:id])
rails 新手。按照多态关联的教程，我遇到了这个以在create 和destroy 中设置@client。 @client = Client.find(params[:client_id] || p
java - 无法通过 .bat 文件设置 JVM 参数/参数(Xmx 和 Xms)
通过将 VM 参数设置为 -Xmx1024m，我能够通过 Eclipse 运行 Java 程序-Xms256M。现在我想通过 Windows 中的 .bat 文件运行相同的 Java 程序 (jar)
c++ - 如何从 C++ 调用 Delphi DLL WideString 参数(包括 var 参数)
我有一个 Delphi DLL，它在被 Delphi 应用程序调用时工作并导出声明为的方法: Procedure ProduceOutput(request,inputs:widestring; va
amazon-web-services - AWS Proton 参数 - 阐明如何在 CF 模板中使用 schema.yaml 参数
浏览完文档和示例后，我还没有弄清楚 schema.yaml 文件中的参数到底用在哪里。在此处使用 AWS 代码示例:https://github.com/aws-samples/aws-proton
java - 错误代码[17041]；索引::1 处缺少 IN 或 OUT 参数；嵌套异常是 java.sql.SQLException: 在索引::1 处缺少 IN 或 OUT 参数
程序参数: procedure get_user_profile ( i_attuid in ras_user.attuid%type, i_data_group in data_g
SQL + IN + 参数
我有一个字符串作为参数传递给我的存储过程。 dim AgentString as String = " 'test1', 'test2', 'test3' " 我想在 IN 中使用该参数声明。 AND
java方法内部变量上没有 "this"参数
这个问题已经有答案了: When should I use "this" in a class? (17 个回答) 已关闭 6 年前。我运行了一些java代码，我看到了一些我不太明白的东西。为什么下
Javascript 参数
我输入 scroll(0,10,200,10);但是当它运行时，它会传递字符串“xxpos”或“yypos”，我确实在没有撇号的情况下尝试过，但它就是行不通。 scroll = function(xp

首页

博学

6Ren·AI

商城

javascript - 将 React 添加到现有页面并在 .js 中获取 URL 参数