• react学习(一)


    一、propTypes属性校验

    import PropTypes from "prop-types".

    TodoItem.propTypes={

       test:PropTypes.string.isRequired,

       content:PropTypes.func,

       index:PropTypes.number

    }

    如果必传的没有传,会报错,可以给默认值

    TodoItem.defaultProps={

       test:'hello word'

    }

    //可以看很多校验,从官网

    二、props、state、render数据和页面之间的联动关系

    当一个组件的state或props发生改变的时候,自己的render函数就会重新执行。父组件的render一次时,子组件的render也会重新运行一次

    父:<Test  content={this.state.content}/>

    子:

    import React,{Component} from 'react';
    class Test extends Component{
        render(){
            return <div>{this.props.content}</div>
        }
    }
    export default Test;
    三、Fragment占位符,解决render出多个标签的内容
    四、react如何使用Css动画
     
    css文件中:
    .show{
       animation:show-item 2s ease-in forwards;
    }
    .hide{
       animation:show-item 2s ease-in forwards;
    }
    @keyframes show-item{
       0%{
         opacity:0;
         color:red
       }
      50%{
         opacity:0.5;
         color:green
       }
      100%{
         opacity:0;
         color:blue
       }
    }
    github上搜索react-transition-group,下载安装
    单个用csstransition,多个用transrationGroup
    react动画官网:http://reactcommunity.org/react-transition-group/css-transition
     
     
     
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    ArcGIS Server 10.2 安装教程
    leaflet 使用kriging.js实现前端自定义插值
    气象科普 -降水
    前端开发者如何用JS开发后台
    Spring的简单介绍
    Hibernate与jsp技术结合的小例子
    Servlet_001 我的第一个servlet程序
    Hibernate一级缓存和三种状态
    github提交代码
    MySql索引原理以及查询优化
  • 原文地址:https://www.cnblogs.com/bwnnxxx123/p/15810891.html
Copyright © 2020-2023  润新知