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

Question

我正在尝试将此代码（代码笔）转换为我的反应 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 } } }

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

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

任何帮助将非常感激！

非常感谢，ClaaziX

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

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

所以在 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

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

我希望它有效！

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

问题描述

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