javascript - 如何将样式应用于 Gatsby 构建网站的降价文件中的数组?
问题描述
我正在使用几个模板来使用 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>
解决方案
这应该有效:
<div className="tags">
{softwareTags.map(tag =>
<span className="tag is-primary is-medium" key={tag}>{tag}</span>
)}
</div>
Map 是首选,因为它返回一个数组(无需您手动构建),并且数组是 React 中的有效子类型。
推荐阅读
- drake - GetInfeasibleConstraints 运行时错误:输出必须是标量类型浮点数
- javascript - Cloudinary 服务器端图片上传签名失败
- windows - gsutil cp 从云存储到远程 Windows 机器
- python - 在生成器函数中出现 StopIteration 错误
- c - 为什么声明 int (*f())[]; 不给出错误或警告?
- mysql - SQL 查询逐月了解有多少文档已过期
- java - java类文件运行时出错
- bash - wg-quick "wait: pid 9185 is not a child if this shell" on Debian 8.11
- python - 删除 Matplotlib,Python 中某些子图的 y 轴刻度标签
- r - 如何在 R XGboost 中找到每个预测的重要变量