React - 使用 javascript 文件在组件中设置样式

Question

我正在尝试调整这个Codepen 加载动画，它具有三元组 [标记、样式和逻辑]，并将其用作可导出的反应组件。

对于我尝试导入CSS的css文件，导出JavaScript函数形成js文件，并呈现html在<div>我的组件中。

这是我到目前为止的代码：

加载.jsx

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

        );

    }

}

Answer 1

您必须进行一些编辑。您正在使用链接标签来加载 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.BackcomponentDidMount(){&nbsp; &nbsp; &nbsp; &nbsp; import("./js/clock.js");&nbsp;}或者您可以更改脚本以导出默认函数并在 componentDidMountexport default () => {&nbsp; //All the clock.js codemakeAnimation();}并用作import makeAnimation from "./js/clock";class Loading extends Component {&nbsp; &nbsp; componentDidMount(){&nbsp; &nbsp; &nbsp; &nbsp; makeAnimation();&nbsp; &nbsp; }使用这种方法的演示或者纯 DOM 操作（如果是外部脚本）。componentDidMount(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;fetch("url").then(res => res.text()).then(text => {&nbsp; &nbsp; const script = document.createElement("script");&nbsp; &nbsp; script.innerHTML = text;&nbsp; &nbsp; document.head.appendChild(script);}您可以运行下面的堆栈片段以查看动画效果。class Loading extends React.Component {&nbsp; &nbsp; componentDidMount(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;fetch("https://codepen.io/nithinthampi/pen/JjjOQVv.js").then(res => res.text()).then(text => {&nbsp; &nbsp; const script = document.createElement("script");&nbsp; &nbsp; script.innerHTML = text;&nbsp; &nbsp; document.head.appendChild(script);});&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <title>clock coffee cup</title>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <defs>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <clipPath id="cupMask">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </clipPath>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <clipPath id="handleMask">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c9.9,0,90.6,0,90.6,0V305z"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </clipPath>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </defs>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <g className="cupGroup">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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"/>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <g clipPath="url(#cupMask)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <path id="base" d="M216,214v48.7&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </g>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <g clipPath="url(#handleMask)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </g>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </g>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <g className="clockGroup" opacity="1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <line id="bighand" fill="none" strokeWidth="14" strokeLinecap="round" strokeMiterlimit="10" x1="300" y1="263" x2="300" y2="189"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <line id="littlehand" fill="none" strokeWidth="14" strokeLinecap="round" strokeMiterlimit="10" x1="300" y1="263" x2="300" y2="221"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </g>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <line id="table" x1="235" y1="376" x2="365" y2="376" fill="none" strokeLinecap="round" strokeMiterlimit="10" strokeWidth="14"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }}ReactDOM.render(<Loading />, document.getElementById("root"));body {&nbsp; background-color:#FFF9ED;&nbsp; overflow: hidden;}body,html {&nbsp; height: 100%;&nbsp; width: 100%;&nbsp; margin: 0;&nbsp; padding: 0;}.container{&nbsp; position:absolute;&nbsp; width:600px;}svg{&nbsp; visibility:hidden;}line, ellipse, path{&nbsp; 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">&nbsp; &nbsp; <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <div id="root"></div>请注意，您使用的所有插件都不是开源的。https://codepen.io/GreenSock/full/OPqpRJ/

Answer 2

这是因为脚本clock.js在Loading组件挂载到 dom之前执行。container = select('.container')并且cupGroup = select('.cupGroup')将获得空。所以注意正在页面上呈现。你应该在EXCUTE脚本clock.js的生命周期componentDidMount。时钟.jsexport funtion initClock() {&nbsp; &nbsp; // write the script in clock.js here}加载.jsximport {initClock} from '.js/clock.js'class Loading extends Component {&nbsp; &nbsp; render() {}&nbsp; &nbsp; componentDidMount() {&nbsp; &nbsp; &nbsp; &nbsp; initClock();&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }}

Answer 3

您可以将样式导入到页面，例如：import clockCSS from 'styles/App.module.css';在页面中，您可以将样式类指定为：className={clockCSS.container}在 style.css 文件中，您必须更新定义样式类的方式：:local(.container){&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; width:600px;}