すべての0.2秒カラーフェードのライフサイクルを反応させ、componentDidMountは、部品を実装されています表します

05例はすべての0.2秒を着色淡

動作はDOMを実行することができる、componentDidMountはアセンブリ取り付けられた表します

import React, { Component } from "react";
export default class Life extends Component {
    state={
       opacity:1
    }

    componentDidMount(){ //声明周期  表示组件已经挂载了
        let { opacity } = this.state  //解构
        setInterval(() => {
            opacity -= 0.1;
            if (opacity <= 0) {
                opacity = 1
            }

            this.setState({
                opacity
            })
            console.log(opacity);

        }, 200);

    }


     render(){
         let { opacity } = this.state  //结构
        //  因为state已发生改变  render就会执行
        // 所以  当  opacity的值发生改变    render函数就会执行  setTimeout就变成了每个0.2s循环一次
        // render 一上来就会执行   状态改变就会执行
         return(
             <div style={{ opacity  }}> React学不会了  怎么办</div>
         )
     }
}

使用
ReactDOM.unmountComponentAtNode(のdocument.getElementById(「ルート」) )のエラー
、あなたが引用していないので、
「反応-DOM」からインポートReactDOMを

おすすめ

転載: www.cnblogs.com/IwishIcould/p/12057355.html