第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

React - 使用 javascript 文件在組件中設(shè)置樣式

React - 使用 javascript 文件在組件中設(shè)置樣式

慕妹3146593 2021-12-12 15:51:56
我正在嘗試調(diào)整這個Codepen 加載動畫，它具有三元組 [標(biāo)記、樣式和邏輯]，并將其用作可導(dǎo)出的反應(yīng)組件。對于我嘗試導(dǎo)入CSS的css文件，導(dǎo)出JavaScript函數(shù)形成js文件，并呈現(xiàn)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貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超13個贊

您必須進(jìn)行一些編輯。


您正在使用鏈接標(biāo)簽來加載 javascript。您需要更改為script標(biāo)記。


<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 之前，您不應(yīng)讓腳本運(yùn)行。使用componentDidMount生命周期方法加載腳本。


如果它是一個自執(zhí)行腳本，您可以使用動態(tài)導(dǎo)入。在這種情況下，您可能需要在所有全局變量前加上window.. 例如window.TweenMax，window.Power1，window.Back


componentDidMount(){

        import("./js/clock.js");

 }

或者


您可以更改腳本以導(dǎo)出默認(rèn)函數(shù)并在 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);

}

您可以運(yùn)行下面的堆棧片段以查看動畫效果。


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/


查看完整回答
反對 回復(fù) 2021-12-12
?
MMMHUHU

TA貢獻(xiàn)1834條經(jīng)驗(yàn) 獲得超8個贊

這是因?yàn)槟_本clock.js在Loading組件掛載到 dom之前執(zhí)行。container = select('.container')并且cupGroup = select('.cupGroup')將獲得空。所以注意正在頁面上呈現(xiàn)。


你應(yīng)該在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();      

    }

}


查看完整回答
反對 回復(fù) 2021-12-12
?
慕容3067478

TA貢獻(xiàn)1773條經(jīng)驗(yàn) 獲得超3個贊

您可以將樣式導(dǎo)入到頁面，例如：


import clockCSS from 'styles/App.module.css';

在頁面中，您可以將樣式類指定為：


className={clockCSS.container}

在 style.css 文件中，您必須更新定義樣式類的方式：


:local(.container){

    position:absolute;

    width:600px;

}


查看完整回答
反對 回復(fù) 2021-12-12
  • 3 回答
  • 0 關(guān)注
  • 195 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號