GatsbyJS：如果字段为空则不显示

Question

我正在尝试输出一堆人的 LinkedIn、Web 或 Facebook，但某些条目在特定字段上没有值。

当我映射条目时，如果该字段为空则不显示该字段，我该如何做某种逻辑？

这是我试过的方法：

 {WpmedarbejderNode.ACFmedarbejder.socials.linkedin !==
                  "null" && (
                  <a href={WpmedarbejderNode.ACFmedarbejder.socials.linkedin}>
                    <MemberSocialIcon
                      src={LinkedIn}
                      alt="Linkedin icon"
                      target="_blank"
                      rel="noopener noreferrer"
                    />
                  </a>
                )}
                {WpmedarbejderNode.ACFmedarbejder.socials.web !== "" && (
                  <a href={WpmedarbejderNode.ACFmedarbejder.socials.web}>
                    <MemberSocialIcon
                      src={Web}
                      alt="Web icon"
                      target="_blank"
                      rel="noopener noreferrer"
                    />
                  </a>
                )}
                {WpmedarbejderNode.ACFmedarbejder.socials.facebook !==
                  "null" && (
                  <a href={WpmedarbejderNode.ACFmedarbejder.socials.facebook}>
                    <MemberSocialIcon
                      src={Facebook}
                      alt="Facebook icon"
                      target="_blank"
                      rel="noopener noreferrer"
                    />
                  </a>
                )}

如果我使用 !== "#" 进行测试并将条目更改为包含 #，它似乎可以工作。但是使用 !== "null" 我的代码似乎不起作用。我也试过让它完全空着，比如 ""

Answer 1

如果要检查 null 值，应使用 !== null（不带双引号）。无论如何，一种常见的技术是只写：

WpmedarbejderNode.ACFmedarbejder.socials.facebook && (<element />)

（没有比较）

如果没有明确的比较，这只会在 facebook 为 true-y 时呈现元素（不是 null、不是“”、不是 undefined，等等 - 多次检查一）

GatsbyJS：如果字段为空则不显示

GatsbyJS: If field is empty don't display

reactjs

gatsby