使用 gatsby-source-google-spreadsheet 将表格中的链接插入 Gatsby

Question

我正在使用 Gatsby 中的 gatsby-source-google-spreadsheet 插件来创建页面上的元素列表。该插件是使用我的表格设置的，并且运行良好。当我从工作表中拉入链接时，我正在努力解决如何将链接作为<a href> 插入。

src/pages/index.js:

import React from "react"
import { graphql } from "gatsby"



export default ({ data }) => {
  const sheetData = data.allGoogleSpreadsheetSheetSheet.nodes;
  const rendered = sheetData.map(item =>
    <div className="section">

      <div className="section__when"> {item.day}, {item.date} at {item.time} </div>
      <div className="section__host"> {item.event}, {item.host} </div>
      <div className="section__link"> <a href="{item.link}" target="_blank">Access here. </a></div>
      <div className="section__description"> {item.description} </div>
    </div>);

  return rendered;
};


export const query = graphql`
  query {
    allGoogleSpreadsheetSheetSheet {
      nodes {
        event
        host
        link
        day
        time
        date
        description
      }
    }
  }
`;

这给了我一个合适的列表，但是当我点击链接时，它试图带我去：http://localhost:8000/%7Bitem.link%7D，这显然是错误的。现在，我的表格只有每个条目的链接https://www.google.com。如何更改链接 div 的结构方式以将我带到外部链接？

Answer 1

如果您检查您的链接，您会发现%7Bitem.link%7D 中的变量名的字面意思是{item.link}，因此您的代码无法识别该变量并且它作为字符串{item.link} 插入。

假设您正在检索并正确接收变量数据，如您所说。

试试这个：

import React from "react"
import { graphql } from "gatsby"



export default ({ data }) => {
  const sheetData = data.allGoogleSpreadsheetSheetSheet.nodes;
  const rendered = sheetData.map(item =>
    <div className="section">

      <div className="section__when"> {item.day}, {item.date} at {item.time} </div>
      <div className="section__host"> {item.event}, {item.host} </div>
      <div className="section__link"> <a href=`${item.link}` target="_blank">Access here. </a></div>
      <div className="section__description"> {item.description} </div>
    </div>);

  return rendered;
};


export const query = graphql`
  query {
    allGoogleSpreadsheetSheetSheet {
      nodes {
        event
        host
        link
        day
        time
        date
        description
      }
    }
  }
`;

找出你的锚标记的不同之处：<a href=`${item.link}` target="_blank">

基本上你使用的是 ES6 中的template literals。它们是允许嵌入表达式的字符串文字，并由反引号 (`)（重音符号）字符而不是双引号或单引号括起来。