React 行內條件渲染

摘要： React 的行內條件渲染（inline conditional rendering）能夠在無 else 分支的情況下簡化條件渲染，這是由子元素定義及渲染決定的。 const ele = ( <div> <p>{true}</p> &...

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;
}