如何将样式应用于 Gatsby 构建网站的降价文件中的数组？答案

【问题标题】：How do you apply styling to array from a markdown file for Gatsby built website?如何将样式应用于 Gatsby 构建网站的降价文件中的数组？
【发布时间】：2018-07-22 21:14:58
【问题描述】：

我正在使用几个模板来使用 Gatsby JS 创建网页，每个模板的所有信息都保存在一个 markdown 文件中（CSS 样式是通过 Bulma 完成的）。

----
path: /software/TestSoftware
title: TestSoftware
templateKey: mdSoftware
tags: ["analysis", "testing", "concrete"]
layoutType: page
---

每个页面都有可变数量的标签。我的问题是如何循环/迭代以设置 javascript 文件中的每个标签的样式？我已经看到在 html 中包含脚本被认为是不好的形式（不是我的脚本当前正在工作）。关于使用 map 或 forEach 是否合适，似乎也存在相互矛盾的信息。

这是我的示例组件（映射不起作用...）：

class mdSoftwareInsetPage extends React.Component {
  render() {
    const {html, frontmatter} = this.props.data.markdownRemark;
    var softwareTags = frontmatter.tags;
    return (
        <section className="section hero">
          <div className="hero-body">
            <div className="container has-text-centered">
              <h1 className="title">
                {frontmatter.title}
              </h1>
            </div>
          </div>
        </section>
        <section className="section">
        <div className="container content">
          <h3 className="specialties">
           Specialties
          </h3>
          <div className="tags">
          <script> 
          softwareTags.map((item, i) =>
            <span className="tag is-primary is-medium">
            ${item}
            </span>)
          </script>
          </div>
        </div>
        </section>
    )
  }
}

对于包含“专业”的部分，呈现的网页应具有以下 HTML：

<div className="container content">
  <h3 className="specialties">
   Specialties
  </h3>
  <div className="tags">
   <span className="tag is-primary is-medium"> analysis </span>
   <span className="tag is-primary is-medium"> testing </span>
   <span className="tag is-primary is-medium"> concrete </span>
  </div>
</div>

【问题讨论】：

标签： javascript reactjs markdown gatsby bulma

【解决方案1】：

这应该可行：

<div className="tags">
  {softwareTags.map(tag =>
    <span className="tag is-primary is-medium" key={tag}>{tag}</span>
  )}
</div>

Map 是首选，因为它返回一个数组（无需您手动构建），并且数组是 React 中的有效子类型。

【讨论】：

【解决方案2】：

您可以简单地使用JSX expression，只比您已有的{frontmatter.title} 表达式稍微复杂一点。

请注意，我还添加了 React.Fragment 来包装您的输出：

class mdSoftwareInsetPage extends React.Component {
  render() {
    const {html, frontmatter} = this.props.data.markdownRemark;
    var softwareTags = frontmatter.tags;
    return (
      <React.Fragment>
        <section className="section hero">
          <div className="hero-body">
            <div className="container has-text-centered">
              <h1 className="title">
                {frontmatter.title}
              </h1>
            </div>
          </div>
        </section>
        <section className="section">
          <div className="container content">
            <h3 className="specialties">
              Specialties
            </h3>
            <div className="tags">
              {
                softwareTags.map((item, i) =>
                  <span className="tag is-primary is-medium">
                    ${item}
                  </span>
                )
              }
            </div>
          </div>
        </section>
      </React.Fragment>
    )
  }
}

【讨论】：