Gatsby/React 项目无法识别 js 脚本标签 cloudinary 变量也尝试使用 Helmet

Question

Gatsby/React 项目不会识别 ssr 脚本标签 cloudinary 变量，但如果我打开检查工具并键入 cloudinary 并按回车键，整个功能就在那里。即使我将 cloudinary 控制台日志放在单击事件中，它仍然 returns 未定义，与 useEffect 相同。

我无法访问 cloudinary 的任何想法。

提前致谢

这里是ssr

import React from "react"

export const onRenderBody = ({ setHeadComponents }, pluginOptions) => {
  setHeadComponents([
    <script
      key="cloudinary"
      src="https://widget.cloudinary.com/v2.0/global/all.js"
      type="text/javascript"
      async
    />,
  ])
}

这是页面的入口代码，我关闭ssr部分后只有头盔

import React, { useEffect, useState } from "react"

import Layout from "../components/layout"

import Footer from "../components/Footer"

import { Helmet } from "react-helmet"


const Concepts = ({ data, location }) => {
 


  const clickMe = () => {
    console.log(cloudinary) //returns undefined
  }


  return (
    <Layout location={location}>
      <Helmet>
        <script
          src="https://widget.cloudinary.com/v2.0/global/all.js"
          type="text/javascript"
        ></script>
      </Helmet>
  

      <button onClick={clickMe}>test</button>

      <Footer />
    </Layout>
  )
}

export default Concepts

测试 cloudinary 的重点是因为添加按钮并且此脚本返回未定义。

var myWidget = cloudinary.createUploadWidget({
  cloudName: 'my_cloud_name', 
  uploadPreset: 'my_preset'}, (error, result) => { 
    if (!error && result && result.event === "success") { 
      console.log('Done! Here is the image info: ', result.info); 
    }
  }
)

Answer 1

您有多种方法可以在 <header> 中添加 <script>，setHeadComponents 和 <Helmet> 都是完全有效的，此外，如果您检查（如您所说）输出代码，它应该出现。所以那部分对我来说很完美。

在您的例子中，cloudinary 未定义，因为属于 window 全局对象。这样的事情应该有效：

import React, { useEffect, useState } from "react"
import Layout from "../components/layout"
import Footer from "../components/Footer"
import { Helmet } from "react-helmet"

const Concepts = ({ data, location }) => {
 
  const clickMe = () => {
    if(typeof window !== 'undefined'){
    console.log(window.cloudinary) //
    let widget = window.cloudinary.createUploadWidget({ 
       cloudName: `your cloudName`,
       uploadPreset: `your upload preset`}, 
    (error, result) => {
      if (!error && result && result.event === "success") { 
      console.log(result.info.url); 
    }});
    widget.open() //
   } 
 }


  return (
    <Layout location={location}>
      <Helmet>
        <script
          src="https://widget.cloudinary.com/v2.0/global/all.js"
          type="text/javascript"
        ></script>
      </Helmet>
      <button onClick={clickMe}>test</button>
      <Footer />
    </Layout>
  )
}

更多资源：

Gatsby/React 项目无法识别 js 脚本标签 cloudinary 变量也尝试使用 Helmet

Gatsby/React Project wont recongnize ssr script tag cloudinary variable also tried with Helmet

javascript

reactjs

gatsby

cloudinary