javascript - 如何重构检查图像(用作 css 背景法师)是否存在以返回 bool 值的函数？

Question

我正在研究一个 React 文件上传组件。我遇到了一个相当微不足道的问题——我希望每个文件都显示与文件扩展名对应的图标。图标通过 css 作为背景图像加载(使用内联样式)。当我没有给定扩展的图标并因此想要显示后备图标时，问题就出现了。

– 我试过像这样使用多个 css 背景图像声明:

style={{
  backgroundImage: `url(./icons/fallback.svg), url(./icons/${item.extension}.svg)`,
}}

或者像这样:

style={{
  backgroundImage: `url(./icons/fallback.svg)`,
  backgroundImage: `url(./icons/${item.extension}.svg)`,
}}

但它不起作用，备用图标未被使用(或者在一种情况下我无法重现，显示了两个图标，这也是不希望的)。

我试图获取文件以确定它是否存在，但是节点服务器(我使用create-react-app)的配置方式即使文件存在也返回200或304实际上并不存在。

我尝试使用创建图像并使用 onload 和 onerror 事件的解决方案 as beeng suggested in this question ，这实际上工作正常——我目前正在使用稍微修改过的 image-exists npm module 实现– 但我无法弄清楚如何重构此函数以简单地返回一个 bool 值。使用 console.log() 和回调工作正常；返回 undefined 中的 bool 值。我想这是由于 Image 方法的异步行为造成的，但我无法创建解决方法——也许使用 Promise API？

我的代码:

exists = src => {
  const checks = {};
  return callback => {
    if (src in checks) {
      return callback(checks[src]);
    }
    let img = new Image();

    img.onload = function() {
      checks[src] = true;
      callback(true);
    };

    img.onerror = function() {
      checks[src] = false;
      callback(false);
    };

    img.src = src;
  };
};

渲染方法:

render() {
  // So far so good, logs as expected, but not such useful      
  console.log(this.exists('./icons/jpg.svg')(bool => {
    if(bool) {
      console.log('yes') 
    } else {
      console.log('no');
    }
  }));
// ...
}

如果我尝试直接返回一个 bool 值，结果是undefined:

render() {     
  console.log(this.exists('./icons/jpg.svg')(bool => bool));
  // ...
}

Answer 1

你是对的，函数不返回 bool 值，因为这是你存在的函数回调的参数，它是异步调用的。解决方案也是异步呈现您的图标，例如...

this.exists(img)(bool => {
  if (bool) {
    render(img) 
  } else {
    render('fallback.svg');
  }
}