我正在尝试调整这个Codepen 加载动画，它具有三元组 [标记、样式和逻辑]，并将其用作可导出的反应组件。对于我尝试导入CSS的css文件，导出JavaScript函数形成js文件，并呈现html在<div>我的组件中。这是我到目前为止的代码：加载.jsximport React, { Component } from 'react';import './css/clock.css';import * from './js/clock.js';class Loading extends Component { render() { return ( <div> <div className="container"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"> <title>clock coffee cup</title> <defs> <clipPath id="cupMask"> <path className="cupMask" d="M215.65,214.41c0,19.85,37.76,35.94,84.35,35.94s84.35-16.09,84.35-35.94H506V399H145V214.41h70.65Z" fill="#ff0d0d"/> </clipPath> <clipPath id="handleMask"> <path className="handleMask" fill="#4BFF00" d="M475,305c-23.7-2.4-104.6,3.9-104.6,3.9s12.1-11.9,13.9-46.2c0,0,2.3-39.9,0-48.3 c9.9,0,90.6,0,90.6,0V305z"/> </clipPath> </defs> <g className="cupGroup"> <ellipse className="ripple" cx="300" cy="214.41" rx="84.35" ry="35.94" fill="rgba(0,0,0,0)" strokeLinecap="round" strokeMiterlimit="10" strokeWidth="6"/> <ellipse className="ripple" cx="300" cy="214.41" rx="84.35" ry="35.94" fill="rgba(0,0,0,0)" strokeLinecap="round" strokeMiterlimit="10" strokeWidth="6"/> <g clipPath="url(#cupMask)"> <path id="base" d="M216,214v48.7 c0,46.4,37.8,84.4,84.2,84.4h-0.3c46.4,0,84.1-38,84.1-84.4V214" fill="none" strokeLinecap="round" strokeMiterlimit="10" strokeWidth="14"/> </g> <g clipPath="url(#handleMask)"> <path opacity="1" id="handle" d="M384.5,228.7c15.9,0,27.8,13.6,27.8,31.5s-14.9,30.5-30.8,30.5" fill="none" strokeLinecap="round" strokeMiterlimit="10" strokeWidth="14"/> </g> </div> </div> ); }}
3 回答
烙印99
TA贡献1829条经验 获得超13个赞
您必须进行一些编辑。
您正在使用链接标签来加载 javascript。您需要更改为script标记。
<link href="//cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js">
clock.js 取决于渲染的 dom 元素。在渲染 DOM 之前，您不应让脚本运行。使用componentDidMount生命周期方法加载脚本。
如果它是一个自执行脚本，您可以使用动态导入。在这种情况下，您可能需要在所有全局变量前加上window.. 例如window.TweenMax，window.Power1，window.Back
componentDidMount(){
import("./js/clock.js");
}
或者
您可以更改脚本以导出默认函数并在 componentDidMount
export default () => {
//All the clock.js code
makeAnimation();
}
并用作
import makeAnimation from "./js/clock";
class Loading extends Component {
componentDidMount(){
makeAnimation();
}
使用这种方法的演示
或者
纯 DOM 操作（如果是外部脚本）。
componentDidMount(){
fetch("url").then(res => res.text()).then(text => {
const script = document.createElement("script");
script.innerHTML = text;
document.head.appendChild(script);
}
您可以运行下面的堆栈片段以查看动画效果。
class Loading extends React.Component {
componentDidMount(){
fetch("https://codepen.io/nithinthampi/pen/JjjOQVv.js").then(res => res.text()).then(text => {
const script = document.createElement("script");
script.innerHTML = text;
document.head.appendChild(script);
}
);
}
render() {
return (
<div>
<div className="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<title>clock coffee cup</title>
<defs>
<clipPath id="cupMask">
<path className="cupMask" d="M215.65,214.41c0,19.85,37.76,35.94,84.35,35.94s84.35-16.09,84.35-35.94H506V399H145V214.41h70.65Z" fill="#ff0d0d"/>
</clipPath>
<clipPath id="handleMask">
<path className="handleMask" fill="#4BFF00" d="M475,305c-23.7-2.4-104.6,3.9-104.6,3.9s12.1-11.9,13.9-46.2c0,0,2.3-39.9,0-48.3
c9.9,0,90.6,0,90.6,0V305z"/>
</clipPath>
</defs>
<g className="cupGroup">
<ellipse className="ripple" cx="300" cy="214.41" rx="84.35" ry="35.94" fill="rgba(0,0,0,0)" strokeLinecap="round" strokeMiterlimit="10" strokeWidth="6"/>
<ellipse className="ripple" cx="300" cy="214.41" rx="84.35" ry="35.94" fill="rgba(0,0,0,0)" strokeLinecap="round" strokeMiterlimit="10" strokeWidth="6"/>
<g clipPath="url(#cupMask)">
<path id="base" d="M216,214v48.7
c0,46.4,37.8,84.4,84.2,84.4h-0.3c46.4,0,84.1-38,84.1-84.4V214" fill="none" strokeLinecap="round" strokeMiterlimit="10" strokeWidth="14"/>
</g>
<g clipPath="url(#handleMask)">
<path opacity="1" id="handle" d="M384.5,228.7c15.9,0,27.8,13.6,27.8,31.5s-14.9,30.5-30.8,30.5" fill="none" strokeLinecap="round" strokeMiterlimit="10" strokeWidth="14"/>
</g>
<ellipse id="rim" cx="300" cy="214.41" rx="84.35" ry="35.94" fill="rgba(0,0,0,0)" strokeLinecap="round" strokeMiterlimit="10" strokeWidth="14"/>
</g>
<g className="clockGroup" opacity="1">
<line id="bighand" fill="none" strokeWidth="14" strokeLinecap="round" strokeMiterlimit="10" x1="300" y1="263" x2="300" y2="189"/>
<line id="littlehand" fill="none" strokeWidth="14" strokeLinecap="round" strokeMiterlimit="10" x1="300" y1="263" x2="300" y2="221"/>
</g>
<line id="table" x1="235" y1="376" x2="365" y2="376" fill="none" strokeLinecap="round" strokeMiterlimit="10" strokeWidth="14"/>
</svg>
</div>
</div>
);
}
}
ReactDOM.render(<Loading />, document.getElementById("root"));
body {
background-color:#FFF9ED;
overflow: hidden;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container{
position:absolute;
width:600px;
}
svg{
visibility:hidden;
}
line, ellipse, path{
stroke:#574227;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<div id="root"></div>
请注意，您使用的所有插件都不是开源的。
https://codepen.io/GreenSock/full/OPqpRJ/
MMMHUHU
TA贡献1834条经验 获得超8个赞
这是因为脚本clock.js在Loading组件挂载到 dom之前执行。container = select('.container')并且cupGroup = select('.cupGroup')将获得空。所以注意正在页面上呈现。
你应该在EXCUTE脚本clock.js的生命周期componentDidMount。
时钟.js
export funtion initClock() {
// write the script in clock.js here
}
加载.jsx
import {initClock} from '.js/clock.js'
class Loading extends Component {
render() {}
componentDidMount() {
initClock();
}
}
慕容3067478
TA贡献1773条经验 获得超3个赞
您可以将样式导入到页面，例如：
import clockCSS from 'styles/App.module.css';
在页面中，您可以将样式类指定为：
className={clockCSS.container}
在 style.css 文件中，您必须更新定义样式类的方式：
:local(.container){
position:absolute;
width:600px;
}
添加回答
举报
0/150
提交
取消