React 行内条件渲染

栏目: IOS · Android · 发布时间: 6年前

内容简介: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 )是 stringnumberobject 且不为 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;
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

PHP Web 2.0开发实战

PHP Web 2.0开发实战

泽瓦斯 / 苏金国 / 人民邮电出版社 / 2008-10-1 / 59.00元

本书通过一个完整的Web 2.0应用——带有动态图库、搜索和地图功能的博客系统详细介绍了Web开发的全过程。首先讨论了Web应用的规划与设计,然后逐章实现各个具体特性,包括网站主页、用户主页、用户注册页面、账户登录和管理页面、用户博客系统、网站搜索以及应用管理等,最后介绍部署和维护。 本书适合中、高级的PHP程序员阅读。一起来看看 《PHP Web 2.0开发实战》 这本书的介绍吧!

html转js在线工具
html转js在线工具

html转js在线工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具