stackoom
  简体   繁体   中英

problems converting code from another language

 原文  2022-01-20 13:45:05  7   1    javascript/ css/ reactjs

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!

This is as far as I've got:

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)
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

1 answers

solution1
 0  2022-01-20 13:57:26

Here is a one to one conversion of the PUG and SCSS to vanilla JS

Just change the innerHTML= to your react element

 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

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

solution2
 0  2022-01-20 17:49:20

Going to try this: https://github.com/pugjs/babel-plugin-transform-react-pug

I hope it works!

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Converting a date from one language to another On space text conversion from language to another language? Customize java script language, from code to code Converting code from Rxjs to xstream Converting Code from RequireJS to Webpack Converting code from PrototypeJS to jQuery Converting the code from JavaScript to TypeScript Converting code from JS to Jquery Problems with converting the notepad example of proton-native from js to tsx Javascript converting ' to URL language
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM