React在index.js中获取浏览器query/request请求参数的方法,以及组件中获取方法

完全前端新手.只是记录用.

想简简单单的写一个页面,就这么难,感觉react太庞大太臃肿了.

我觉得我的诉求还是挺简单的

把项目同步到坚果云,这样在家在单位以及在多台电脑上同时写代码都是可以的.可是里面的node_modules的文件太多了,坚果云同步了一个多小时才全部过去.

因为服务器也运行了坚果云,我的代码更新直接会在服务器上同步,这样生成了网站以后直接就能在客户机访问了.

然后想创建一个页面,能够接收到pdd给的回调信息,结果找了很多文章都是找到的如何在父组件给子组件传递消息,如果把消息传递给父组件等...

一脸懵逼的不知道怎么从index中获取到query信息.要是在aspx中,直接在formload函数就获取到了.

---

使用create-react-app创建的app,在src目录下有一个index.js

但是里面没有办法写

componentDidMount

函数,也没有办法使用this怎么办? 

因为index.js本身不是一个组件所以不能使用this关键字.

需要新建一个js文件在src中,随便命名 

内容是

const testFunc = a=>
{
var vars = {};
    window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
         // 如果是带#进行路由的PWA项目，有可能会存在下面if这个场景
         if (value.indexOf('#') > -1) {
           value = value.split('#')[0];
         }
         vars[key] = value;
     });
     console.log('全局定义js,获取浏览器参数是:',vars);
     return vars;
}
export default testFunc;

在index.js中引用这个js

import testFunc from "./testFunc";

引用后,在index.js中就可以使用了.比如传递给

CallBackForm组件

const vars = testFunc();
ReactDOM.render(
  <React.StrictMode>
      <div>hello world! i ddd see you!</div>
      <CallBackForm vars={vars}/>
    {/*<App />*/}
  </React.StrictMode>,
  document.getElementById('root')
);

如果在组件中使用,在组件

componentDidMount

函数中写:

let vars = [];
        window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
            // 如果是带#进行路由的PWA项目，有可能会存在下面if这个场景
            if (value.indexOf('#') > -1) {
                value = value.split('#')[0];
            }
            vars[key] = value;
        });
        console.log('在组件中使用正则表达式获取query集合:', vars);