标题可能看起来有点含糊，但这是因为我目前在将 Google Optimize 集成到我们的 React / Next.js 项目中时遇到了多个问题。我将尝试尽可能详细地解释我的问题和行动。但是，如果有不清楚的地方，请告诉我。
<Html lang="en" className="async-hide">
<Head>
{/*
Google Optimize Ant-Flicker Snippet
https://support.google.com/optimize/answer/9692472?ref_topic=6197443
*/}
<style
dangerouslySetInnerHTML={{
__html: `.async-hide { opacity: 0 !important}`,
}}
/>
<script
dangerouslySetInnerHTML={{
__html: `
(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'OPT-OPTIMIZE_ID':true});
`,
}}
/> …我想要的是在 Axios 收到我的请求时显示一个进度条。axios包有onDownloadProgress和onUploadProgress在下载或上传期间显示进度条，但在获取请求期间没有进度条。我搜索了很多问题和文章，但它们总是关于下载/上传进度或 Vue.js，我不明白如何在 React 中做到这一点。
我在下面有以下代码（这将不起作用，因为我没有下载）。
理想情况下，我会自己写；但是如果有人可以解释我如何将axios-progress 包loadProgressBar()与我的 Axios 请求集成，我愿意考虑使用axios-progress 包。
request = () => {
this.setState({error: null, results: []})
axios({
method: 'get',
url: process.env.REACT_APP_API_LOCALS,
responseType: 'json',
onDownloadProgress: (progressEvent) => {
var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
this.setState({
loading: percentCompleted
})
},
})
.then(
(response) => {
console.log(response)
this.setState({
results: response.data.results,
error: null,
totalPages: Math.ceil(response.data.count / response.data.results.length)
})
}
)
.catch(
(error) => {
this.setState({
loading: …编辑：根据指南，有一个名为 getMetadata() 的方法。我如何使用它来返回道具？
使用 React-google-maps 包，我已经能够使用自己的 kml 文件加载 Google 地图。该 KML 文件包含多个形状，每个形状背后都有元数据。我想要的是，当用户单击这些形状之一时，他会在弹出窗口中看到形状背后的数据。
假设我有一个 Google 地图，其中包含显示两个国家/地区的 kml 文件。用户将鼠标悬停在这些国家/地区之一上，会看到一个弹出窗口，显示他所在的国家/地区。他将鼠标悬停在第二个国家上空并得到相同的结果。当他单击该国家/地区的 KML 形状时，他会收到更多信息。
这需要我了解一些事情：
- 如何在 KML 形状上创建悬停效果以显示基于形状的数据
- 如何在 KML 形状上创建单击事件以显示基于形状的数据
但是，我无法理解如何使这个 KML 文件具有交互性。
这是我到目前为止所拥有的：
import React, { Component } from 'react';
import { withScriptjs, withGoogleMap, GoogleMap, Marker, KmlLayer } from "react-google-maps"
const MyMapComponent = withScriptjs(withGoogleMap((props) =>
<GoogleMap
defaultZoom={8}
defaultCenter={{ lat: 50.5010789, lng: 4.4764595 }}
>
<KmlLayer
url='https://example.be/kmlfile.kml'
options={{ preserveViewport : false}}
/>
{props.isMarkerShown && <Marker position={{ lat: 50.5010789, …因此，我必须对组件进行分类：
Class1：具有一个单击按钮
Class2：具有一种调用我的api的方法
基本上，我想要的是调用一个方法来设置和编辑来自另一个类的一个类内的状态。但是我一直失败。
Class1.js
export class Class1 extends Component {
render() {
return (
<div onClick={must call Class2Method}></div>
)
}
}
Class2.js
export class Class2 extends Component {
Class2Method(){
Here I call my API, I set & call states, ...
}
render {
return (
<Class1 />
Here I return my API content
)
}
}
因此，我发现了一些类似的问题，但通常要么过时，不完全是我正在搜索的内容，要么他们不使用 Google 标签管理器，而是将标签写入<head>.
- - - - - -现在的情况- - - - - -
我们使用 Google 标签管理器在我们的网站上注入 Google Analytics 等标签。我们根据需要发生的情况使用多个标签；例如：
所有数据都完美地传输至 Google Analytics
- - - - - -问题- - - - - -
但是，我们还从其他环境（例如localhost:3000或 ）接收数据https://dev.ourdomain.com，这可能会导致数据不准确。
-----------我们想要的-----------
是一种分离数据的方法。通过以下任一方式：
在第 1 点和第 2 点之间，我更喜欢第一种方式，因为这会将现有数据分为生产数据和开发数据。
-----------建议的解决方案-----------
我一直在考虑使用新的属性，然后使用 Google 跟踪代码管理器，我将根据当前域返回 Google Analytics 设置。生产才会回归UA-code-1、发展UA-code-2 …
development-environment google-analytics production-environment google-tag-manager
所以我试图了解如何使用 .env 来保护我的登录身份验证的 api 密钥和数据。我遵循了 dotenv 包的过程和这里的 stackoverflow答案。
我做了什么：
1. 我安装了 dotenv 包
2. 在我的根文件夹中，我添加了一个只有一行的 .env ：
API_AUTH=http://myapilink.com
3. 在我的 App.js 中，我添加了以下行：
require('dotenv').config()
console.log(process.env.API_AUTH)
但是，console.log 返回 'undefined'，这是为什么呢？我错过了什么？
我最近创建了一个新组织，并采用付费计划来发布无限的私人包。
但是，每次我尝试将我的包发布到我的组织时，它都会给我以下错误：
npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! Forbidden : @myScopeName/myPackageName
我已经注销，然后作为范围登录；像这样：
npm login scope=myScopeName
然后返回以下内容
logged in as myUserName to scope @myScopeName on http://registry.npmjs.org/
我检查了我的.npmrc文件，我有以下几行：
registry=http://registry.npmjs.org/
scope=myScopeName
@myScopeName:registry=http://registry.npmjs.org
但是我仍然无法发布我的包。有谁知道我是否忘记了其他事情，或者我是否根据上述内容做错了什么？
谢谢！
按照有关 AWS 实例调度的教程，我能够创建一个新的 EC2instanceScheduler 云形成堆栈。
但是，每次我尝试更新该堆栈时，都会发生以下错误：
需要能力：[CAPABILITY_IAM]
我搜索了信息，但似乎找不到任何关于这是什么、这意味着什么以及如何激活它的明确信息。
在此页面上，亚马逊表示如下：
在某些情况下，您必须明确承认您的堆栈模板包含某些功能，以便 AWS CloudFormation 创建堆栈。
但我似乎无法理解如何以及在哪里。有人可以给我关于这个主题的明确信息吗？这个错误是什么意思，我该如何解决？
reactjs ×5
methods ×2
api ×1
axios ×1
class ×1
components ×1
dotenv ×1
get-request ×1
google-maps ×1
kml ×1
loading ×1
next.js ×1
npm ×1
npm-publish ×1
organization ×1
package ×1
publish ×1
stack ×1