ReactFragment

ReactFragment模块用于向子节点集合添加key值。

 

'use strict';

var _prodInvariant = require('./reactProdInvariant');

var ReactChildren = require('./ReactChildren');
var ReactElement = require('./ReactElement');

var emptyFunction = require('fbjs/lib/emptyFunction');
var invariant = require('fbjs/lib/invariant');
var warning = require('fbjs/lib/warning');

var numericPropertyRegex = /^\d+$/;
var warnedAboutNumeric = false;

// ReactFragment.create使用指定key值作为前缀为props.children添加key属性
// 示例：针对子节点没有key值，props.swapped变动将引起组件元素卸载、重新加载的绘制机制
// function Swapper(props) {
//   let children;
//   if (props.swapped) {
//     children = createFragment({
//       right: props.rightChildren,
//       left: props.leftChildren
//     });
//   } else {
//     children = createFragment({
//       left: props.leftChildren,
//       right: props.rightChildren
//     });
//   }
//   return <div>{children}</div>;
// }
var ReactFragment = {
  create: function (object) {
    // object非对象形式警告
    if (typeof object !== 'object' || !object || Array.isArray(object)) {
      process.env.NODE_ENV !== 'production' ? 
        warning(false, 'React.addons.createFragment only accepts a single object. Got: %s', object) 
        : void 0;
      return object;
    }

    // object不能接受ReactElement
    if (ReactElement.isValidElement(object)) {
      process.env.NODE_ENV !== 'production' ? 
        warning(false, 'React.addons.createFragment does not accept a ReactElement ' 
          + 'without a wrapper object.') 
        : void 0;
      return object;
    }

    // object不能接受React封装的dom节点
    !(object.nodeType !== 1) ? 
      process.env.NODE_ENV !== 'production' ? 
        invariant(false, 'React.addons.createFragment(...): Encountered an invalid child;' 
          + ' DOM elements are not valid children of React components.') 
        : _prodInvariant('0') 
      : void 0;

    var result = [];

    // key不允许为数值型
    for (var key in object) {
      if (process.env.NODE_ENV !== 'production') {
        if (!warnedAboutNumeric && numericPropertyRegex.test(key)) {
          process.env.NODE_ENV !== 'production' ? 
            warning(false, 'React.addons.createFragment(...): Child objects should have ' 
              + 'non-numeric keys so ordering is preserved.') 
            : void 0;
          warnedAboutNumeric = true;
        }
      }

      // 使用指定key值作为前缀为react节点添加key属性
      ReactChildren.mapIntoWithKeyPrefixInternal(object[key], result, key, emptyFunction.thatReturnsArgument);
    }

    return result;
  }
};

module.exports = ReactFragment;