TypeScript react.isValidElement函數代碼示例

  /**
   * Attempts to create a React element using a custom user provided factory,
   * or the default matcher factory.
   */
  createElement(match: string, props: Props): Node {
    let element: any = null;

    if (this.factory) {
      element = React.createElement(this.factory, props, match);
    } else {
      element = this.replaceWith(match, props);
    }

    if (__DEV__) {
      if (typeof element !== 'string' && !React.isValidElement(element)) {
        throw new Error(`Invalid React element created from ${this.constructor.name}.`);
      }
    }

    return element;
  }

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
}

	return (elementOrNode = null, options = null) => {
		// When passed a node, call the hook straight away.
		if (!isValidElement(elementOrNode)) {
			const node = elementOrNode
			hook(node, options)
			// return the node so it can be chained (e.g. when within callback refs
			// <div ref={node => connectDragSource(connectDropTarget(node))}/>
			return node
		}

		// If passed a ReactElement, clone it and attach this function as a ref.
		// This helps us achieve a neat API where user doesn't even know that refs
		// are being used under the hood.
		const element: ReactElement | null = elementOrNode
		throwIfCompositeComponentElement(element as any)

		// When no options are passed, use the hook directly
		const ref = options ? (node: Element) => hook(node, options) : hook
		return cloneWithRef(element, ref)
	}

export function cloneElement(element: React.ReactNode, ...restArgs: any[]) {
  if (!React.isValidElement(element)) return element;

  return React.cloneElement(element, ...restArgs);
}