React 行內條件渲染
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
等的表示式結果作為子元素去渲染時,使用ofollow,noindex" target="_blank"> 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; }