将十六进制颜色与内联样式与来自 graphQL 查询的 React 结合使用

Question

我正在尝试在 github 个人资料上复制固定的回购协议，以便在我的网站中显示我自己的。

我有一个工作查询和一个工作组件。但是，通过查询输出的颜色是十六进制颜色。

return (
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 mb-8">
            {data.github.user.pinnedItems.edges.map(({node}) => (
                <div className="flex flex-col justify-around border rounded-md">
                    <div className="p-4">
                        <div className="flex items-center mb-4">
                            <span className="h-3 w-3 mr-2"><GoRepo/></span>
                            <h2 className="font-semibold text-sm m-0">
                                <a href={node.url} className="">{node.name}</a>
                            </h2>
                        </div>

                        <div>
                            <p className="text-xs font-sans">{node.description}</p>
                        </div>

                        <div className="flex items-center mt-4">                                               
                            <span className="bg-yellow-600 rounded-full h-3 w-3"></span>
                            <span className="text-xs ml-2 font-sans text-gray-600">{node.primaryLanguage.name}</span>
                        </div>
                    </div>
                </div>
            ))}
        </div>
    )

十六进制颜色是通过 {node.primaryLanguage.color} 生成的，我如何在下面使用内联的十六进制颜色？

<span className="bg-yellow-600 rounded-full h-3 w-3"></span> 因为我目前只是在使用 bg-yellow-600 才能弄清楚。

我尝试了以下方法：

const bgColor = {
        backgroundColor: "{node.primaryLanguage.color}"
    }

    return (...

           <span style={bgColor} className="rounded-full h-3 w-3"></span>

我希望使用该字符串，因为一旦它在地图中运行，它将填充十六进制代码，但什么也没有。

import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'
import { GoRepo } from "react-icons/go";

const PinnedRepos = () => {
    const data = useStaticQuery(graphql`
    query{
        github {
          user(login: "mrpbennett") {
            pinnedItems(first: 6, types: REPOSITORY) {
                edges {
                node {
                    ... on GitHub_Repository {
                    name
                    description
                    url
                    primaryLanguage {
                        name
                        color
                    }
                    }
                }
                }
            }
            }
        }
      }
    `)

    {data.github.user.pinnedItems.edges.map(({node}) => {

        const bgColor = {
            backgroundColor: node.primaryLanguage.color
        }

        return (
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div className="flex flex-col justify-around border rounded-md">
                        <div className="p-4">
                            <div className="flex items-center mb-4">
                                <span className="h-3 w-3 mr-2"><GoRepo/></span>
                                <h2 className="font-semibold text-sm m-0">
                                    <a href={node.url} className="">{node.name}</a>
                                </h2>
                            </div>

                            <div>
                                <p className="text-xs font-sans">{node.description}</p>
                            </div>

                            <div className="flex items-center mt-4">                                               
                                <span stlye={bgColor} className="rounded-full h-3 w-3"></span>
                                <span className="text-xs ml-2 font-sans text-gray-600">{node.primaryLanguage.name}</span>
                            </div>
                        </div>
                    </div>
            </div>
        )
    })}
}

export default PinnedRepos

Answer 1

不要忘记在 React 中包裹在 { } 之间的是真实的 JavaScript。我的意思是你的 .map() 只是一个函数，你可以在其中添加任何额外的逻辑。

你只需要将箭头函数从 shorthand return 转换为函数体：

return (
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 mb-8">
          {data.github.user.pinnedItems.edges.map(({node}) => {
            const bgColor = {
              backgroundColor: node.primaryLanguage.color
            }

            return (
              <div className="flex flex-col justify-around border rounded-md">
                  <div className="p-4">
                      <div className="flex items-center mb-4">
                          <span className="h-3 w-3 mr-2"><GoRepo/></span>
                          <h2 className="font-semibold text-sm m-0">
                              <a href={node.url} className="">{node.name}</a>
                          </h2>
                      </div>

                      <div>
                          <p className="text-xs font-sans">{node.description}</p>
                      </div>

                      <div className="flex items-center mt-4">                                               
                          <span style={bgColor} className="rounded-full h-3 w-3"></span>
                          <span className="text-xs ml-2 font-sans text-gray-600">{node.primaryLanguage.name}</span>
                      </div>
                  </div>
              </div>
          )})}
        </div>
    )

将十六进制颜色与内联样式与来自 graphQL 查询的 React 结合使用

Using Hex colors with inline Styles with React from a graphQL query

css

inline

jsx

reactjs