TypeScript react.cloneElement函数代码示例

export default function cloneWithRef(
	element: any,
	newRef: any,
): React.ReactElement<any> {
	const previousRef = element.ref
	invariant(
		typeof previousRef !== 'string',
		'Cannot connect React DnD to an element with an existing string ref. ' +
			'Please convert it to use a callback ref instead, or wrap it into a <span> or <div>. ' +
			'Read more: https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute',
	)

	if (!previousRef) {
		// When there is no ref on the element, use the new ref directly
		return cloneElement(element, {
			ref: newRef,
		})
	}

	return cloneElement(element, {
		ref: (node: any) => {
			newRef(node)
			if (previousRef) {
				previousRef(node)
			}
		},
	})
}

  leaving.forEach(key => {
    const child = indexedChildren[key];
    const newChild = newlyLeaving[key]
      ? React.cloneElement(child, {
          _pose: exitPose,
          onPoseComplete: (pose: CurrentPose) => {
            if (pose === exitPose) scheduleChildRemoval(key);

            const { onPoseComplete } = child.props;
            if (onPoseComplete) onPoseComplete(pose);
          },
          popFromFlow: flipMove
        })
      : child;

    const insertionIndex = prevKeys.indexOf(key);

    // We might have had new items added before this item in the same
    // render. So here we find the correct item to anchor to. This is
    // a pretty shitty algo. But it is also the one we have
    // if (insertionIndex) {
    // TODO: Write a shitty algo
    // }

    indexedChildren[child.key] = newChild;
    nextState.displayedChildren.splice(
      insertionIndex,
      0,
      hasPropsForChildren ? prependProps(newChild, propsForChildren) : newChild
    );
  });

  Children.forEach(targetChildren, (child: ReactElement<any>) => {
    if (!child) return;
    const isEntering = enteringKeys.has(getKey(child));
    const baseProps = {
      flipMove,
      measureSelf: popFromLayoutOnExit
    };

    if (isEntering && (enterAfterExit && leavingKeys.length)) return;

    const cloneProps: { [key: string]: any } = isEntering
      ? {
          initialPose: animateOnMount || hasMounted ? preEnterPose : undefined,
          pose: enterPose,
          onPoseComplete: null,
          ...baseProps,
          ...props
        }
      : {
          ...baseProps,
          ...props
        };

    children.push(cloneElement(child, cloneProps));
  });

export const addClassnames = (
    classNames: Array<string | undefined>,
    elem: React.ReactElement<any>
): React.ReactElement<any> => React.cloneElement(
    elem,
    {
        className: classnames(...classNames.concat(elem.props.className))
    }
)

    const reactMapper = (childObj, root) => {
      const reactChildren = Object.keys(childObj).map(key => childObj[key]);

      if (root) {
        return cloneElement(root, root.props, ...reactChildren);
      }

      return reactChildren[0];
    };

 connectDragSource: (element: React.ReactElement<any>) => {
   return React.cloneElement(element, {
     draggable: true,
     onDragStart: (event: React.DragEvent<any>) => {
       if (handler.start) {
         handler.start(this.props as TInner)(event);
       }
       (this.props as any).dispatch(dndStarted(handler.getData(this.props), event))
     },
     onDragEnd: (event) => (this.props as any).dispatch(dndEnded(handler.getData(this.props), event)),
   })
 },

    return setElementAtPath(decoratedFixture, elPath, element => {
      if (!isRefSupported(element.type)) {
        return element;
      }

      return React.cloneElement(element, {
        ref: getDecoratedRef(
          (element as ElementWithRef).ref,
          spyRef,
          elPath,
          cachedRefHandlers
        )
      });
    });

function traceReactElementPattern(depth: number): ReactElementPattern<ReactElement<any>> {
    return {
        String(el, type, children) {
            console.log(depth, "E/S", type, mapReactNode(typeofReactNodePattern)(children));
            if (children) {
                const newChildren = mapReactNode(traceReactNodePattern(depth + 1))(children);
                return cloneElement(el, el.props, newChildren);
            } else {
                return el;
            }
        },
        Component(el, type) {
            console.log(depth, "E/C", type);
            return createElement(wrapComponentType(type, mapReactElement(traceReactElementPattern(depth + 1))), el.props);
        },
    };
}

export function renderComponent(component:RenderComponentType<any>, props={}, children=null){
  if (component["prototype"] instanceof React.Component || (component["prototype"] && component["prototype"].isReactComponent)){
    return React.createElement(component as React.ComponentClass<any>, props, children)
  } else if (React.isValidElement(component)){
    return React.cloneElement(component as Element, props, children);
  } else if ((typeof component) === 'function'){
    const funProps = (children != null) ? defaults(props, {children}) : props
    return React.createElement(FunctionComponent, {
      key: props["key"],
      fun: component,
      props: funProps
    })

  }
  console.warn("Invalid component", component)
  return null
}

export function renderComponent(component:RenderComponentType<any>, props={}, children=null){
  let isReactComponent = (
    component["prototype"] instanceof React.Component ||
    (component["prototype"] && component["prototype"].isReactComponent) ||
    typeof component === 'function'
  )
  if (isReactComponent){
    return React.createElement(
      component as React.ComponentClass<any>,
      props, children
    )
  } else if (React.isValidElement(component)){
    return React.cloneElement(
      component as Element,
      omitBy(props, isUndefined), children
    );
  }
  console.warn("Invalid component", component)
  return null
}