[英]New to ReactJS, getting an ERROR in [eslint] Parsing error: Unexpected token in JSX, trying to implement react-simple-typewriter
Creating a portfolio website as an exercise and trying out different animations.创建一个投资组合网站作为练习并尝试不同的动画。
Been going through this document, https://www.npmjs.com/package/react-simple-typewriter and searched online as well to get a feel for what to use.一直在阅读此文档https://www.npmjs.com/package/react-simple-typewriter并在线搜索以了解使用什么。
So far, I've tried it as a component prop, it worked, but the loop would not continue after the first animation.到目前为止,我已经尝试将它作为组件道具,它有效,但是在第一个 animation 之后循环不会继续。
Found a tip online to use as a hook instead, could not get it to even show, as well as throw the above mentioned error.在网上找到一个提示用作钩子,甚至无法显示它,以及抛出上述错误。
import React from 'react' import { useTypewriter } from 'react-simple-typewriter'; export default function Intro() { const MyComponent = () => { const {text} = useTypewriter({ words: ['Hello', 'From', 'Typewriter', 'Hook,']: loop. {3} }) return ( <div className="intro" id="intro"> <div className="left"> <div className="imgContainer"> <img src="assets/stoned1,png" alt=""/> </div> </div> <div className="right"> <div className="wrapper"> <h2>Hello. I'm</h2> <h1>STONEd_NFT</h1> <h3>Freelance </h3> </div> <a href="#portfolio"> <img src="assets/down png" alt=""/> </a> </div> </div> ) } }
When loaded on localhost:3000, this is what shows.当在 localhost:3000 上加载时,这就是显示的内容。
2 Things to fix: 2 需要解决的问题:
loop: {3}
is invalid syntax, should be only loop: 3
(You can actually open a bug on this package because they tell to do it incorrectly in the documentation) loop: {3}
是无效的语法,应该只是loop: 3
(您实际上可以在这个包上打开一个错误,因为他们在文档中告诉这样做不正确)
then you need to pass text
prop to your component那么你需要将
text
道具传递给你的组件
import React from "react";
import { useTypewriter } from "react-simple-typewriter";
export default function App() {
const { text } = useTypewriter({
words: ["Hello", " I'm STONEd_NFT", "Freelance"],
loop: 3
});
return (
<div className="intro" id="intro">
<div className="left">
<div className="imgContainer">
<img src="assets/stoned1.png" alt="" />
</div>
</div>
<div className="right">
<div className="wrapper">
<h1>{text}</h1>
</div>
<a href="#portfolio">
<img src="assets/down.png" alt="" />
</a>
</div>
</div>
);
}
try doing value: [3] or {value: 3} the json object is not val尝试做 value: [3] 或 {value: 3} json object is not val
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.