Giter Club home page Giter Club logo

antd-summary's Introduction

antd-summary

antd 使用的一些问题demo
现在包括以下方面

  1. 如果修改antd 组件的默认样式(覆盖) 在这方面发现了 styled-componets 这种全新的方式并添加了demo components/form (cssmodule的方式覆盖 global)
    components/styled-components 一种新的cssinjs的方式

  2. 路由url 信息错误情况下的处理方式 (不刷新页面)

    • url不带参数的情况 例如
      https://github.com/duanbowen
      -> https://github.com/duanbowen_error
      处理方式:
      直接在总路由的配置文件的末尾设置一个page404的路由
     <Switch>
        <Route path="/" exact component={myForm} />
        <Route path="/cssmodule" exact component={cssmodule} />
        <Route path="/styled" exact component={styled} />
        {/* 路由未匹配时显示/ 未改变路由*/}
        <Route path="/*" exact component={Page404} />
      </Switch>
    
    • url 带有参数的情况
      例如:
      https://github.com/duanbowen?status=1&detail=new
      -> https://github.com/duanbowen?status=1&detail=new_error 如果碰到这类情况的url 参数错误导致的路由错误 需要视情况而定
      总的来说当前页面需要设置一个flag 在flag = true 的情况下显示导入的404组件 其他情况显示
  3. debounce 与Search等组件使用需要注意的问题
    如果需要绑定的函数是react的合成事件(event ) 例如 onClick , react 为了性能优化,将这类事件绑定在一个合成事件对象上,此对象在被调用之后会被立即释放(保留引用,但是上面的属性将全部被注销)
    这意味着无法异步获取合成事件对象, 即是说类似 event.target.value 将失效。
    解决方案一:
    -> 这时需要使用 event.persist() 保留对该事件的引用,并不注销此事件.
    -> (只需要e.target.value属性时)
    <Search onChange={ e => { this.onSearchChange(e.target.value)}}
    this.onSearchChange = debounce(this.onSearchChange , 200);

antd-summary's People

Contributors

dbwcooper avatar

Stargazers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.