在脚本文本内容中反应 setState

Question

大家好！
我正在从客户端使用 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);
   };
}, []);

非常感谢你们！

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

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