Question

我正在尝试初始化fancybox，所以我使用以下代码：

$gallery
  .fancybox({
    caption: (instance, item) => {           // <-- error on this line
      `<div class="fancybox-download-image">
            <h3 class="fancybox-download-image__title">Download Image</h3>
            <div class="fancybox-download-image__text">
              <p class="fancybox-download-image__paragraph">By downloading this asset you are agreeing to our <a href="/legal/image-license" class="license-opener" target="_blank">image license terms</a>.</p>
              <a href="${item.src}" class="btn btn--cta btn--download">Download image</a>
            </div>
          </div>`
    },
  });

但是，这将引发以下错误：

期望分配或函数调用，而看到一个表达式no-unused-expressions

我曾经看过documentation about this rule，但像往常一样，我不太清楚要纠正该错误的意思

任何帮助将不胜感激

Answer 1

摘自no-unused-expressions上的eslint文档：

未使用的表达式对程序状态没有影响，表示存在逻辑错误。

事实上，您的回调

(instance, item) => {           // <-- error on this line
  `<div class="fancybox-download-image">
        <h3 class="fancybox-download-image__title">Download Image</h3>
        <div class="fancybox-download-image__text">
          <p class="fancybox-download-image__paragraph">By downloading this asset you are agreeing to our <a href="/legal/image-license" class="license-opener" target="_blank">image license terms</a>.</p>
          <a href="${item.src}" class="btn btn--cta btn--download">Download image</a>
        </div>
      </div>`
}

实际上什么也没做。

您需要通过添加return关键字或删除大括号来返回字符串文字：

(instance, item) => `<div class="fancybox-download-image">
    <h3 class="fancybox-download-image__title">Download Image</h3>
    <div class="fancybox-download-image__text">
      <p class="fancybox-download-image__paragraph">By downloading this asset you are agreeing to our <a href="/legal/image-license" class="license-opener" target="_blank">image license terms</a>.</p>
      <a href="${item.src}" class="btn btn--cta btn--download">Download image</a>
    </div>
  </div>`

或：

(instance, item) => {
    return `<div class="fancybox-download-image">
        <h3 class="fancybox-download-image__title">Download Image</h3>
        <div class="fancybox-download-image__text">
          <p class="fancybox-download-image__paragraph">By downloading this asset you are agreeing to our <a href="/legal/image-license" class="license-opener" target="_blank">image license terms</a>.</p>
          <a href="${item.src}" class="btn btn--cta btn--download">Download image</a>
        </div>
      </div>`
}

这两种语法实际上没有区别。但是，“无花括号”只能与箭头功能一起使用，并且只有一个语句时才返回该值。

eslint-fancybox初始化没有未使用的表达式错误

1 个答案: