在脚本文本内容中反应 setState

Posted 2023-03-25

【中文标题】在脚本文本内容中反应 setState

【英文标题】：React setState inside script text content

【发布时间】：2021-09-18 21:40:37

【问题描述】：

大家好！ 我正在从客户端使用 ReactJS 将图像上传到 Cloudinary，然后我遇到了一个问题。 说明 我在 React.useEffect 函数内添加了一些代码行的组件内的脚本标记。在 script 标签里面，我有 Cloudinary 获取成功后返回的数据，我想通过在脚本内容中使用 setState 来获取数据。 但我无法获取数据。 问题 如何在字符串中使用 setState？或者有什么方法可以获取字符串中返回的数据？

这是我的代码。

React.useEffect(() => 

const scriptCloudinaryCdn = document.createElement('script');
scriptCloudinaryCdn.src =
  'https://upload-widget.cloudinary.com/global/all.js';
scriptCloudinaryCdn.async = true;



const widgetScript = document.createElement('script');

 // I wanted to get the data that was returned from this
const widgetContent = `  var myWidget = cloudinary.createUploadWidget(
  cloudName: 'cloudname', 
  uploadPreset: 'upload_preset', (error, result) =>  
    if (!error && result && result.event === "success") 
       // this is the data from Cloudinary, I wanted to carry this with setState
      console.log('Done! Here is the image info: ', result.info); 
  
    
  
)

document.getElementById("upload_widget").addEventListener("click", function()
    myWidget.open();
  , false);`;

widgetScript.text = widgetContent;

document.body.appendChild(scriptCloudinaryCdn );
document.body.appendChild(widgetScript);

   return () => 
     document.body.removeChild(scriptCloudinaryCdn );
     document.body.removeChild(widgetScript);
   ;
, []);

非常感谢你们！

【问题讨论】：

使用一些全局事件发射器怎么样？订阅 useEffect 内的 react 组件中的事件，然后在成功回调中发出事件？

【参考方案1】：

您可以创建一些全局事件发射器实例（例如使用此library），订阅 React 组件中的事件，然后从小部件的成功回调中发射事件。

如果不想使用全局发射器，可以使用 DOM 事件发射器，如下所示：

const [uploadedImageData, setUploadedImageData] = useState(null);

useEffect(() => 
  const onImageUplaoded = (event) => 
    setUploadedImageData(event.detail);
  ;

  document.getElementById("upload_widget").addEventListener('imageuploaded', onImageUploaded);

  return () => 
    document.getElementById("upload_widget").removeEventListener('imageuploaded', onImageUploaded);    
  
, []);

您可以在小部件的成功回调中执行以下操作：

uploadPreset: 'upload_preset', (error, result) =>  
  if (!error && result && result.event === "success") 
    const event = new CustomEvent('imageuploaded',  detail: result.info );
    document.getElementById("upload_widget").dispatchEvent(event);
  

当然你可以考虑改进；这只是解决您问题的方法之一。

【讨论】：

谢谢，这是个好主意，我会试试的！