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

Question

I am attempting to convert this code ( Code pen ) into my react JavaScript code, but I am failing, probably not least because I don't know what language the original code is in!我正在尝试将此代码（代码笔）转换为我的反应 JavaScript 代码，但我失败了，可能不仅仅是因为我不知道原始代码是什么语言！

This is as far as I've got:这是据我所知：

index.js: 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:布局.模块.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)

I am sorry for being a terrible noob, but we all have to start somewhere! 我很抱歉成为一个可怕的菜鸟，但我们都必须从某个地方开始！

Any help would be much appreciated!任何帮助将非常感激！

Thank you very much, ClaaziX非常感谢，ClaaziX

Answer 1

Here is a one to one conversion of the PUG and SCSS to vanilla JS这是 PUG 和 SCSS 到 vanilla JS 的一对一转换

Just change the innerHTML= to your react element只需将 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); } }

 <div class="rain"></div>

So in React I guess it would be something like所以在 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
};

Answer 2

Going to try this: https://github.com/pugjs/babel-plugin-transform-react-pug打算试试这个： https://github.com/pugjs/babel-plugin-transform-react-pug

I hope it works!我希望它有效！

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

问题描述

1 个解决方案

解决方案1
0 2022-01-20 13:57:26

解决方案2
0 2022-01-20 17:49:20

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

问题描述

1 个解决方案

解决方案1 0 2022-01-20 13:57:26

解决方案2 0 2022-01-20 17:49:20

解决方案1
0 2022-01-20 13:57:26

解决方案2
0 2022-01-20 17:49:20