在脚本文本内容中反应 setState

Question

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

这是我的代码。

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

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

在脚本文本内容中反应 setState

React setState inside script text content

javascript

cloudinary

reactjs