时间戳

首页 > 解决方案 > 如何在 JSX 的 HTML 中使用局部变量？

reactjs - 如何在 JSX 的 HTML 中使用局部变量？

问题描述

如何meta=data.site.siteMetadata在下面的 Gatsby 代码中使用本地变量？Var/Const/$ 似乎不起作用。我想使用这个metavar 而不是data

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

export default ({ data }) => (
  <div>
    <h1>About {data.site.siteMetadata.title}</h1>
    <p>We're a very cool website you should return to often.</p>
  </div>
)

export const query = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`

我怎样才能使以下工作：

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

export default ({ data }) => (
  <div>
    {var meta=data.site.siteMetadata}
    <h1>About {meta.title}</h1>
    <p>We're a very cool website you should return to often.</p>
  </div>
)

export const query = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`

标签： reactjsjsxgatsby

解决方案

我认为这个问题是关于React而不是Gatsby具体的：

一个如何在功能组件中使用局部变量的简单示例：

const MyComponent = ({ data }) => {
  const myLocalVariable = data.site.siteMetadata.title;
  return (
    <div>
      <h1>About {myLocalVariable}</h1>
      <p>We're a very cool website you should return to often.</p>
    </div>
  );
};

export default MyComponent;

有关更多详细信息，您的graphql查询将返回下一个对象：

{
  "data": {
    "site": {
      "siteMetadata": {
        "title": "My Site Title"
      }
    }
  }
}

因此，在您的情况下，您可以执行以下操作：

import React from 'react';
import { graphql } from 'gatsby';

export default ({ data }) => {
  // meta is an object.
  const meta = data.site.siteMetadata;
  return (
    <div>
      <h1>About {meta.title}</h1>
      <p>We're a very cool website you should return to often.</p>
    </div>
  );
};

export const query = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`;

您应该阅读 React 文档中的入门部分，Gatsby是 React 的站点生成器，因此事先了解所有 React 概念非常重要。

推荐阅读