React源码学习：查看React.cloneElement

最新推荐文章于 2024-04-28 21:24:31 发布

HaanLen

最新推荐文章于 2024-04-28 21:24:31 发布

阅读量388

点赞数

文章标签： react.js 学习 javascript

本文链接：https://blog.csdn.net/weixin_40119412/article/details/128381850

版权

cloneElement函数

export function cloneElement(element, config, children) {
  if (element === null || element === undefined) {
    throw new Error(
      `React.cloneElement(...): The argument must be a React element, but you passed ${element}.`,
    );
  }

  let propName;

  // Original props are copied
  const props = assign({}, element.props);

  // Reserved names are extracted
  let key = element.key;
  let ref = element.ref;
  // Self is preserved since the owner is preserved.
  const self = element._self;
  // Source is preserved since cloneElement is unlikely to be targeted by a
  // transpiler, and the original source is probably a better indicator of the
  // true owner.
  const source = element._source;

  // Owner will be preserved, unless ref is overridden
  let owner = element._owner;

  if (config != null) {
    if (hasValidRef(config)) {
      // Silently steal the ref from the parent.
      ref = config.ref;
      owner = ReactCurrentOwner.current;
    }
    if (hasValidKey(config)) {
      if (__DEV__) {
        checkKeyStringCoercion(config.key);
      }
      key = '' + config.key;
    }

    // Remaining properties override existing props
    let defaultProps;
    if (element.type && element.type.defaultProps) {
      defaultProps = element.type.defaultProps;
    }
    for (propName in config) {
      if (
        hasOwnProperty.call(config, propName) &&
        !RESERVED_PROPS.hasOwnProperty(propName)
      ) {
        if (config[propName] === undefined && defaultProps !== undefined) {
          // Resolve default props
          props[propName] = defaultProps[propName];
        } else {
          props[propName] = config[propName];
        }
      }
    }
  }

  // Children can be more than one argument, and those are transferred onto
  // the newly allocated props object.
  const childrenLength = arguments.length - 2;
  if (childrenLength === 1) {
    props.children = children;
  } else if (childrenLength > 1) {
    const childArray = Array(childrenLength);
    for (let i = 0; i < childrenLength; i++) {
      childArray[i] = arguments[i + 2];
    }
    props.children = childArray;
  }

  return ReactElement(element.type, key, ref, self, source, owner, props);
}

测试代码

<body>
  <div id="test-root"></div>
  <script>
    function createDOM() {
      return React.createElement('div', { className: 'test-div' },
        React.createElement('div', { className: 'children-div' }, 'some'),
        React.createElement('span', null, 'hell-word')
      )
    }
    const ele = createDOM()

    const cloneDom = React.cloneElement(ele, { id: 'clone-dom' });
    console.log('cloneDom', cloneDom);

    ReactDOM.render(cloneDom, document.getElementById('test-root'))
  </script>
</body>