内容简介:React 的行内条件渲染(inline conditional rendering)能够在无 else 分支的情况下简化条件渲染,这是由子元素定义及渲染决定的。对应的 JavaScript 代码是把
React 的行内条件渲染(inline conditional rendering)能够在无 else 分支的情况下简化条件渲染,这是由子元素定义及渲染决定的。
const ele = ( <div> <p>{true}</p> <p>{true && 1}</p> <p>{false}</p> <p>{false && 2}</p> </div> );
对应的 JavaScript 代码是
const ele = React.createElement( "div", null, React.createElement("p", null, true), React.createElement("p", null, true && 1), React.createElement("p", null, false), React.createElement("p", null, false && 2) );
把 true && 1
等的表达式结果作为子元素去渲染时,使用 ChildReconciler#createChild
,其中仅当子元素类型( typeof
)是 string
、 number
、 object
且不为 null 时才渲染,所以 true
/ false
则不会渲染。
[]
function createChild( returnFiber: Fiber, newChild: any, expirationTime: ExpirationTime, ): Fiber | null { if (typeof newChild === 'string' || typeof newChild === 'number') { // Text nodes don't have keys. If the previous node is implicitly keyed // we can continue to replace it without aborting even if it is not a text // node. const created = createFiberFromText( '' + newChild, returnFiber.mode, expirationTime, ); created.return = returnFiber; return created; } if (typeof newChild === 'object' && newChild !== null) { switch (newChild.$$typeof) { case REACT_ELEMENT_TYPE: { const created = createFiberFromElement( newChild, returnFiber.mode, expirationTime, ); created.ref = coerceRef(returnFiber, null, newChild); created.return = returnFiber; return created; } case REACT_PORTAL_TYPE: { const created = createFiberFromPortal( newChild, returnFiber.mode, expirationTime, ); created.return = returnFiber; return created; } } if (isArray(newChild) || getIteratorFn(newChild)) { const created = createFiberFromFragment( newChild, returnFiber.mode, expirationTime, null, ); created.return = returnFiber; return created; } throwOnInvalidObjectType(returnFiber, newChild); } if (__DEV__) { if (typeof newChild === 'function') { warnOnFunctionType(); } } return null; }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- React 条件渲染方法大全
- React 的几种条件渲染以及选择
- 列表渲染 wx:key 的作用、条件渲染 wx:if 与 hidden 的区别
- SQL where条件和jion on条件的详解及区别
- Python 条件语句
- Golang: 条件和循环
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
PHP Web 2.0开发实战
泽瓦斯 / 苏金国 / 人民邮电出版社 / 2008-10-1 / 59.00元
本书通过一个完整的Web 2.0应用——带有动态图库、搜索和地图功能的博客系统详细介绍了Web开发的全过程。首先讨论了Web应用的规划与设计,然后逐章实现各个具体特性,包括网站主页、用户主页、用户注册页面、账户登录和管理页面、用户博客系统、网站搜索以及应用管理等,最后介绍部署和维护。 本书适合中、高级的PHP程序员阅读。一起来看看 《PHP Web 2.0开发实战》 这本书的介绍吧!