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

Question

如何在下面的 Gatsby 代码中使用像 meta=data.site.siteMetadata 这样的本地变量？ Var/Const/$ 好像不行。我想使用这个 meta 变量而不是 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
      }
    }
  }
`

Answer 1

我认为问题是关于 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 查询将 return 下一个对象：

{
  "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 文档中的 Getting Started 部分，Gatsby 是 React 的站点生成器，因此事先了解所有 React 概念很重要。

Answer 2

你做得对。但是，只需要替换 return 方法。

旧：

   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 default ({ data }) => {
    var 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>
     )
    }

=> () // 这个函数中的语法 return 正是你在里面写的。

只需将其替换为

=> { 
// Here you can define the variables
return ()
}

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

How to use a local variable within HTML in JSX?

jsx

reactjs

gatsby