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

【问题标题】：How to use a local variable within HTML in JSX?如何在 JSX 的 HTML 中使用局部变量？
【发布时间】：2019-10-09 12:04:05
【问题描述】：

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

【问题讨论】：

我无法理解这个问题，哪个本地var？请显示您要使用的所需代码
@DennisVash - 抱歉不清楚。我已经更新了问题。

标签： reactjs jsx gatsby

【解决方案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 查询将返回下一个对象：

{
  "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 概念非常重要。

【讨论】：

【解决方案2】：

你做得对。但是，只需要替换返回方法即可。

旧：

   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>
     )
    }

=> () // 这个函数中的语法只是返回你在里面写的内容。

只需将其替换为

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

【讨论】：