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