zoukankan      html  css  js  c++  java
  • react路由渲染

    三种渲染方式

    • component = (组件对象或函数)

    <Route path="/home" component={Home} />

    <Route path="/home" component={()=><Home />} />

    • render = (函数)

    <Route path="/home" render={props=><Home />} />

    • children = (函数或组件)

    <Route path="/about" children={props=>{

    return <div>children渲染</div>

    }} />

    <Route path="/about" children={<About />} />

    路由对象的传递

    3种渲染区别总结

    • component可以使用组件类渲染或内联式方式渲染,render只能使用函数,children使用函数或直接使用组件对象
    • component内联式渲染方式在每次匹配路由成功后都将创建一个新组件,而后两者不会,所以用内联式方式建议使用后两者,内联方式渲染组件,推荐用render
    • children的值是一个函数时,无论当前地址和path路径匹不匹配,都将会执行children对应的函数,当children的值为一个组件时,当前地址和path不匹配时,路由组件不渲染
    • children函数方式渲染,会在形参中接受到一个对象,对象中match属性如果当前地址匹配成功返回对象,否则null
    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    双击返回 退出程序
    读取InputStream 中的内容
    wsgi服务器
    python 中的GIL
    json
    __getattr__
    错误类型
    __slot__用法
    获取属性以及基本方法
    linux IO
  • 原文地址:https://www.cnblogs.com/ht955/p/14830976.html
Copyright © 2011-2022 走看看