从另一种语言转换代码的问题答案

【问题标题】：problems converting code from another language从另一种语言转换代码的问题
【发布时间】：2022-01-21 01:49:20
【问题描述】：

我正在尝试将此代码 (Code pen) 转换为我的 react JavaScript 代码，但我失败了，可能不仅仅是因为我不知道原始代码是什么语言！

据我所知：

index.js：

import Head from 'next/head'
import Layout, { siteTitle } from '../components/layout'
import utilStyles from '../styles/utils.module.css'
import { getSortedPostsData } from '../lib/posts'
import Link from 'next/link'
import Date from '../components/date'
import react from 'react'

export default function Home({ allPostsData }) {
  return (
    statics: {
      droplets = 250
      rain
        - for (let r = 0; r < droplets; r++)- const droplets = 250
      rain
        - for (let r = 0; r < droplets; r++)
    }
    <Layout home>
      <Head>
        <title>{siteTitle}</title>
      </Head>
       svg.rain__drop(preserveAspectRatio="xMinYMin", viewBox='0 0 5 50', style=`--x: 
        ${Math.floor(Math.random() * 100)}; --y: 
        ${Math.floor(Math.random() * 100)}; --o: 
        ${Math.random()}; --a: ${Math.random() + 0.5}; --d: 
        ${(Math.random() * 2) - 1}; --s: ${Math.random()}`)
      path(stroke='none', d="M 2.5,0 C 2.6949458,3.5392017 3.344765,20.524571 4.4494577,30.9559 5.7551357,42.666753 4.5915685,50 2.5,50 0.40843152,50 -0.75513565,42.666753 0.55054234,30.9559 1.655235,20.524571 2.3050542,3.5392017 2.5,0 Z")
            
      <section className={utilStyles.headingMd}>
        <p>'Very capable, friendly individual. Have been off work due to illness and have recently got back into
the workforce and am now looking for something more challenging which would enable me to
support a family. I have great skills and knowledge in the hospitality sector and am also very
technologically minded. I have experience with HTML, CSS, JAVA, & other languages. I feel capable of
learning any programming language. I would like the opportunity to develop my skills and a career in
the technology sector.'
        </p>
        <p>
          (This is a sample website - you’ll be building a site like this in{' '}
          <a href="https://nextjs.org/learn">our Next.js tutorial</a>.)
        </p>
      </section>
      <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
        <h2 className={utilStyles.headingLg}>Blog</h2>
        <ul className={utilStyles.list}>
          {allPostsData.map(({ id, date, title }) => (
            <li className={utilStyles.listItem} key={id}>
              <Link href={`/posts/${id}`}>
                <a>{title}</a>
              </Link>
              <br />
              <small className={utilStyles.lightText}>
                <Date dateString={date} />
              </small>
            </li>
          ))}
        </ul>
      </section>
    </Layout>
  )
}

export async function getStaticProps() {
  const allPostsData = getSortedPostsData()
  return {
    props: {
      allPostsData
    }
  }
}

layout.module.css：

.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.backToHome {
  margin: 3rem 0 0;
}

*
*:before
*:after
  box-sizing border-box

body
  background-color #6c78a9
  display flex
  align-items center
  justify-content center

.rain__drop
  animation-delay calc(var(--d) * 1s)
  animation-duration calc(var(--a) * 1s)
  animation-iteration-count infinite
  animation-name drop
  animation-timing-function linear
  height 30px
  left calc(var(--x) * 1%)
  position absolute
  top calc((var(--y) + 50) * -1px)

  path
    fill #808fbf
    opacity var(--o)
    transform scaleY(calc(var(--s) * 1.5))

@keyframes drop
  90%
    opacity 1
  100%
    opacity 0
    transform translateY(100vh)

我很抱歉成为一个可怕的菜鸟，但我们都必须从某个地方开始！

任何帮助将不胜感激！

非常感谢，克拉兹X

【问题讨论】：

它是哈巴狗（上面写着）。请添加更多细节。什么不起作用？你被困在哪里了？
在 Codepen 中，您可以单击节标题旁边的向下箭头，然后为已编译的语言选择“查看已编译（语言）”。在这种情况下，查看编译后的 HTML 可能会很有用。
只是没有显示下雨，没有错误信息！
哦！除了：DevTools 无法加载源地图：无法加载 chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/scripts/iframe_form_detection.map 的内容：HTTP 错误：状态代码 404，net::ERR_UNKNOWN_URL_SCHEME

标签： javascript css reactjs

【解决方案1】：

这里是 PUG 和 SCSS 到 vanilla JS 的一对一转换

只需将 innerHTML= 更改为您的反应元素

document.querySelector(".rain").innerHTML = Array.from({ length: 250 })
  .map((_, i) => `<svg class="rain__drop" preserveAspectRatio = "xMinYMin" viewBox = '0 0 5 50' 
style="
--x: ${Math.floor(Math.random() * 100)}; 
--y: ${Math.floor(Math.random() * 100)}; 
--o: ${Math.random()}; 
--a: ${Math.random() + 0.5}; 
--d: ${(Math.random() * 2) - 1}; 
--s: ${Math.random()}">
  <path stroke="none" 
    d="M 2.5,0 C 2.6949458,3.5392017 3.344765,20.524571 4.4494577,30.9559 5.7551357,42.666753 4.5915685,50 2.5,50 0.40843152,50 -0.75513565,42.666753 0.55054234,30.9559 1.655235,20.524571 2.3050542,3.5392017 2.5,0 Z"></path></svg>`).join("")

*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  background-color: #6c78a9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rain__drop {
  -webkit-animation-delay: calc(var(--d) * 1s);
          animation-delay: calc(var(--d) * 1s);
  -webkit-animation-duration: calc(var(--a) * 1s);
          animation-duration: calc(var(--a) * 1s);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: drop;
          animation-name: drop;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  height: 30px;
  left: calc(var(--x) * 1%);
  position: absolute;
  top: calc((var(--y) + 50) * -1px);
}
.rain__drop path {
  fill: #a1c6cc;
  opacity: var(--o);
  transform: scaleY(calc(var(--s) * 1.5));
}
@-webkit-keyframes drop {
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(100vh);
  }
}
@keyframes drop {
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(100vh);
  }
}

&lt;div class="rain"&gt;&lt;/div&gt;

所以在 React 中我猜它会是这样的

render() { 
   const div = `<div className="rain">
     ${Array.from({ length: 250 })
      .map((_, i) => `<svg className="rain__drop" preserveAspectRatio = "xMinYMin" viewBox = '0 0 5 50' 
    style="
    --x: ${Math.floor(Math.random() * 100)}; 
    --y: ${Math.floor(Math.random() * 100)}; 
    --o: ${Math.random()}; 
    --a: ${Math.random() + 0.5}; 
    --d: ${(Math.random() * 2) - 1}; 
    --s: ${Math.random()}">
      <path stroke="none" 
        d="M 2.5,0 C 2.6949458,3.5392017 3.344765,20.524571 4.4494577,30.9559 5.7551357,42.666753 4.5915685,50 2.5,50 0.40843152,50 -0.75513565,42.666753 0.55054234,30.9559 1.655235,20.524571 2.3050542,3.5392017 2.5,0 Z"></path></svg>`).join("")}
  </div>}`
   return div
};

【讨论】：

这不起作用，我想我把它放在了错误的地方...你能解释一下把你提供的代码放在哪里吗？
没有。我不做 React。所以你自己在那里
好的，感谢您的帮助！