在盖茨比反应问题中绘制动态圆圈

Question

我使用 Strapi 作为后端，在我的前端使用 Gatsby。

我正在使用后端的值在卡片内画一个圆圈。卡片数量由后端值生成。

目前，我正在使用以下 css 代码对 css 中的前三张卡片进行硬编码，其中包含 n:th 个子值：

.svgAssesment circle {
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 10;
  stroke: rgba(255, 255, 255, 0.05);
  transform: translate(5px, 5px);
  stroke-linecap: round;
}
.svgAssesment circle:nth-child(2) {
  stroke: #fff;
  stroke-dasharray: 440px;
}
.card:nth-child(1) .svgAssesment circle:nth-child(2) {
  stroke-dashoffset: calc(440px - (440px * 9) / 10);
}
.card:nth-child(2) .svgAssesment circle:nth-child(2) {
  stroke-dashoffset: calc(440px - (440px * 9) / 10);
}
.card:nth-child(3) .svgAssesment circle:nth-child(2) {
  stroke-dashoffset: calc(440px - (440px * 8) / 10);
}

有没有一种方法可以动态绘制它们，而不是对这些值进行硬编码，以便每个圆的 stroke-dashoffset 都基于我前端的道具 {item.rate}。因此，在上面的示例中，对于生成的每张卡片，硬编码值是 9,9 和 8 应该替换为 {item.rate} 的值，而不仅仅是我的 nth:child 代码中的三张.

这是我的前端代码：

import React from "react"
import Title from "./Title"
import { graphql, useStaticQuery } from "gatsby"

    const query = graphql`
      {
        allStrapiAssessment {
          nodes {
            title
            rating {
              id
              topic
              rate
            }
          }
        }
      }
    `
    
    const SelfAssesment = () => {
      const data = useStaticQuery(query)
      //console.log(data)
    
      const {
        allStrapiAssessment: { nodes: assesments },
      } = data
      //console.log(assesments)
      const [value] = React.useState(0)
      const { title, rating } = assesments[value]
      console.log(title, rating)
    
      return (
        <section className="section jobs">
          <Title title={title} />
    
          <section className="assesment">
            <div className="container">
              {rating.map(item => {
                return (
                  <div key={item.id} className="card">
                    <div className="box">
                      <div>
                        <div class="percent">
                          <svg className="svgAssesment">
                            <circle cx="70" cy="70" r="70"></circle>
                            <circle cx="70" cy="70" r="70"></circle>
                          </svg>
                          <div class="number">
                            <h2>
                              {item.rate}
                              <span>/10</span>
                            </h2>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div id="buttonColor" className="text">
                      {item.topic}
                    </div>
                  </div>
                )
              })}
            </div>
          </section>
        </section>
      )
    }
    
    export default SelfAssesment

Answer 1

您需要使用 styled-components 才能在样式中使用 React props。

或者，您可以只对 stroke-dashoffset CSS 规则使用内联样式，并将其余样式委托给 CSS 样式表。类似于：

import React from "react"
import Title from "./Title"
import { graphql, useStaticQuery } from "gatsby"

const query = graphql`
  {
    allStrapiAssessment {
      nodes {
        title
        rating {
          id
          topic
          rate
        }
      }
    }
  }
`

const SelfAssesment = () => {
  const data = useStaticQuery(query)
  //console.log(data)

  const {
    allStrapiAssessment: { nodes: assesments },
  } = data
  //console.log(assesments)
  const [value] = React.useState(0)
  const { title, rating } = assesments[value]
  console.log(title, rating)

  return (
    <section className="section jobs">
      <Title title={title} />

      <section className="assesment">
        <div className="container">
          {rating.map(item => {
            return (
              <div key={item.id} className="card">
                <div className="box">
                  <div>
                    <div class="percent">
                      <svg className="svgAssesment">
                        <circle cx="70" cy="70" r="70"/>
                        <circle cx="70" cy="70" r="70" style={{ 
                          strokeDashoffset: `calc(440px - (440px * ${item.rate}) / 10)`
                        }}/>
                      </svg>
                      <div class="number">
                        <h2>
                          {item.rate}
                          <span>/10</span>
                        </h2>
                      </div>
                    </div>
                  </div>
                </div>
                <div id="buttonColor" className="text">
                  {item.topic}
                </div>
              </div>
            )
          })}
        </div>
      </section>
    </section>
  )
}

export default SelfAssesment

注意：

 <circle cx="70" cy="70" r="70" style={{ 
    strokeDashoffset: `calc(440px - (440px * ${item.rate}) / 10)`
  }}/>

在上面的代码片段中，您只是计算 stroke-dashoffset 规则，其中内联样式在第二个 circle.

中应用动态 item.rate 值

在盖茨比反应问题中绘制动态圆圈

Draw dynamic circle in gatsby react issue

javascript

reactjs

strapi

gatsby