json SvelteKit中的条件HTML渲染未按预期工作

gijlo24d 于 12个月前发布在其他

关注(0)|答案(2)|浏览(117)

所以我有一个页脚组件，它从JSON文件中读取链接。我有一个特定的头，我只想在对应的JSON属性不为空的情况下显示（即，如果没有提供链接，它就不会显示）。我目前的设置看起来有点像这样：

{#if (socialMediaLinks["contactUs"] !== "")}
  <a href={socialMediaLinks["contactUs"]}>
    <h2>Contact Us</h2>
  </a>
{/if}

问题是，这段代码导致h2 always 可见，即使没有提供链接。如果我试着改变if

{#if (socialMediaLinks["contactUs"] === "")}

即使属性不为空，链接也不会显示。
这种行为让人感觉倒退。我是不是漏了什么？

2条答案

我猜问题出在你的假设上。socialMediaLinks["contactUs"]的值可能是null或undefined，并且您正在请求精确比较（三元运算符）。
这应该是可行的：

{#if (socialMediaLinks["contactUs"])}
  <a href={socialMediaLinks["contactUs"]}>
    <h2>Contact Us</h2>
  </a>
{/if}

只要检查字符串的长度，如果它比只有标记的字符串长，则条件为真。而“@html”让苗条的编译器知道，内容已经是HTML了。

if (socialMediaLinks["contactUs"].length > 9){
    {@html socialMediaLinks["contactUs"]}
}