TypeScript Children.forEach方法代码示例

const makeChildList = (children: React.ReactNode) => {
  const list: Array<React.ReactElement<any>> = [];
  React.Children.forEach(
    children,
    child => child && list.push(child as React.ReactElement<any>)
  );
  return list;
};

const handleTransition = (
  {
    children: targetChildren,
    preEnterPose,
    enterPose,
    exitPose,
    animateOnMount,
    enterAfterExit,
    popFromLayoutOnExit,
    flipMove,
    ...props
  }: Props,
  {
    children: displayedChildren,
    leaving,
    scheduleChildRemoval,
    hasMounted
  }: State
) => {
  const displayedKeys = getKeys(displayedChildren);
  const targetKeys = getKeys(targetChildren);

  const enteringKeys = new Set(
    targetKeys.filter(key => {
      const isEntering =
        displayedKeys.indexOf(key) === -1 || leaving[key] === false;

      if (isEntering) delete leaving[key];

      return isEntering;
    })
  );
  const leavingKeys = displayedKeys.filter(
    key => targetKeys.indexOf(key) === -1
  );

  const children: Array<ReactElement<any>> = [];

  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));
  });

  leavingKeys.forEach(key => {
    leaving[key] = false;

    const child = displayedChildren.find(
      (c: ReactElement<any>) => getKey(c) === key
    );

    const newChild = cloneElement(child as ReactElement<any>, {
      pose: exitPose,
      onPoseComplete: (pose: CurrentPose) => {
        scheduleChildRemoval(key);

        const { onPoseComplete } = child.props;
        onPoseComplete && onPoseComplete(pose);
      },
      popFromLayout: popFromLayoutOnExit || flipMove,
      ...props
    });

    const insertionIndex = displayedKeys.indexOf(key);

    children.splice(insertionIndex, 0, newChild);
  });

  return { children };
};

export function walkTree(
  element: React.ReactNode,
  context: Context,
  visitor: (
    element: React.ReactNode,
    instance: React.Component<any> | null,
    newContextMap: Map<any, any>,
    context: Context,
    childContext?: Context,
  ) => boolean | void,
  newContext: Map<any, any> = new Map(),
) {
  if (!element) {
    return;
  }

  if (Array.isArray(element)) {
    element.forEach(item => walkTree(item, context, visitor, newContext));
    return;
  }

  // A stateless functional component or a class
  if (isReactElement(element)) {
    if (typeof element.type === 'function') {
      const Comp = element.type;
      let childContext = context;
      let child;

      // Are we are a react class?
      if (isComponentClass(Comp)) {
        const props = Object.assign({}, Comp.defaultProps, getProps(element));
        const instance = new Comp(props, context);
        // In case the user doesn't pass these to super in the constructor.
        // Note: `Component.props` are now readonly in `@types/react`, so
        // we're using `defineProperty` as a workaround (for now).
        Object.defineProperty(instance, 'props', {
          value: instance.props || props,
        });
        instance.context = instance.context || context;

        // Set the instance state to null (not undefined) if not set, to match React behaviour
        instance.state = instance.state || null;

        // Override setState to just change the state, not queue up an update
        // (we can't do the default React thing as we aren't mounted
        // "properly", however we don't need to re-render as we only support
        // setState in componentWillMount, which happens *before* render).
        instance.setState = newState => {
          if (typeof newState === 'function') {
            // React's TS type definitions don't contain context as a third parameter for
            // setState's updater function.
            // Remove this cast to `any` when that is fixed.
            newState = (newState as any)(instance.state, instance.props, instance.context);
          }
          instance.state = Object.assign({}, instance.state, newState);
        };

        if (Comp.getDerivedStateFromProps) {
          const result = Comp.getDerivedStateFromProps(instance.props, instance.state);
          if (result !== null) {
            instance.state = Object.assign({}, instance.state, result);
          }
        } else if (instance.UNSAFE_componentWillMount) {
          instance.UNSAFE_componentWillMount();
        } else if (instance.componentWillMount) {
          instance.componentWillMount();
        }

        if (providesChildContext(instance)) {
          childContext = Object.assign({}, context, instance.getChildContext());
        }

        if (visitor(element, instance, newContext, context, childContext) === false) {
          return;
        }

        child = instance.render();
      } else {

        // Just a stateless functional
        if (visitor(element, null, newContext, context) === false) {
          return;
        }

        const FC = Comp as React.FunctionComponent;
        child = FC(getProps(element), context);
      }

      if (child) {
        if (Array.isArray(child)) {
          child.forEach(item => walkTree(item, childContext, visitor, newContext));
        } else {
          walkTree(child, childContext, visitor, newContext);
        }
      }
    } else if ((element.type as any)._context || (element.type as any).Consumer) {
      // A React context provider or consumer
      if (visitor(element, null, newContext, context) === false) {
        return;
      }
//.........这里部分代码省略.........

export function walkTree(
  element: ReactElement<any>,
  context: Context,
  visitor: (
    element: ReactElement<any>,
    instance: any,
    context: Context,
  ) => boolean | void,
) {
  const Component = element.type;
  // a stateless functional component or a class
  if (typeof Component === 'function') {
    const props = assign({}, Component.defaultProps, element.props);
    let childContext = context;
    let child;

    // Are we are a react class?
    //   https://github.com/facebook/react/blob/master/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js#L66
    if (Component.prototype && Component.prototype.isReactComponent) {
      // typescript force casting since typescript doesn't have definitions for class
      // methods
      const _component = Component as any;
      const instance = new _component(props, context);
      // In case the user doesn't pass these to super in the constructor
      instance.props = instance.props || props;
      instance.context = instance.context || context;

      // Override setState to just change the state, not queue up an update.
      //   (we can't do the default React thing as we aren't mounted "properly"
      //   however, we don't need to re-render as well only support setState in
      //   componentWillMount, which happens *before* render).
      instance.setState = newState => {
        instance.state = assign({}, instance.state, newState);
      };

      // this is a poor man's version of
      //   https://github.com/facebook/react/blob/master/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js#L181
      if (instance.componentWillMount) {
        instance.componentWillMount();
      }

      if (instance.getChildContext) {
        childContext = assign({}, context, instance.getChildContext());
      }

      if (visitor(element, instance, context) === false) {
        return;
      }

      child = instance.render();
    } else {
      // just a stateless functional
      if (visitor(element, null, context) === false) {
        return;
      }

      // typescript casting for stateless component
      const _component = Component as StatelessComponent<any>;
      child = _component(props, context);
    }

    if (child) {
      walkTree(child, childContext, visitor);
    }
  } else {
    // a basic string or dom element, just get children
    if (visitor(element, null, context) === false) {
      return;
    }

    if (element.props && element.props.children) {
      Children.forEach(element.props.children, (child: any) => {
        if (child) {
          walkTree(child, context, visitor);
        }
      });
    }
  }
}

export function walkTree(element: React.ReactNode, context: Context, visitor: (
      element: React.ReactNode,
      instance: React.Component<any> | null,
      context: Context,
      childContext?: Context,
    ) => boolean | void,
) {
    if (Array.isArray(element)) {
        element.forEach(item => walkTree(item, context, visitor));
        return;
    }

    if (!element) {
        return;
    }

    // a stateless functional component or a class
    if (isReactElement(element)) {
      if (typeof element.type === 'function') {
        const Comp = element.type;
        const props = Object.assign({}, Comp.defaultProps, getProps(element));
        let childContext = context;
        let child;

        // Are we are a react class?
        //   https://github.com/facebook/react/blob/master/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js#L66
        if (isComponentClass(Comp)) {
          const instance = new Comp(props, context);
          // In case the user doesn't pass these to super in the constructor
          instance.props = instance.props || props;
          instance.context = instance.context || context;
          // set the instance state to null (not undefined) if not set, to match React behaviour
          instance.state = instance.state || null;

          // Override setState to just change the state, not queue up an update.
          //   (we can't do the default React thing as we aren't mounted "properly"
          //   however, we don't need to re-render as well only support setState in
          //   componentWillMount, which happens *before* render).
          instance.setState = newState => {
            if (typeof newState === 'function') {
              // React's TS type definitions don't contain context as a third parameter for
              // setState's updater function.
              // Remove this cast to `any` when that is fixed.
              newState = (newState as any)(instance.state, instance.props, instance.context);
            }
            instance.state = Object.assign({}, instance.state, newState);
          };

          // this is a poor man's version of
          //   https://github.com/facebook/react/blob/master/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js#L181
          if (instance.componentWillMount) {
            instance.componentWillMount();
          }

          if (providesChildContext(instance)) {
            childContext = Object.assign({}, context, instance.getChildContext());
          }

          if (visitor(element, instance, context, childContext) === false) {
            return;
          }

          child = instance.render();
        } else {
          // just a stateless functional
          if (visitor(element, null, context) === false) {
            return;
          }

          child = Comp(props, context);
        }

        if (child) {
          if (Array.isArray(child)) {
            child.forEach(item => walkTree(item, childContext, visitor));
          } else {
            walkTree(child, childContext, visitor);
          }
        }
      } else {
        // a basic string or dom element, just get children
        if (visitor(element, null, context) === false) {
          return;
        }

        if (element.props && element.props.children) {
            React.Children.forEach(element.props.children, (child: any) => {
            if (child) {
              walkTree(child, context, visitor);
            }
          });
        }
      }
    } else if (typeof element === 'string' || typeof element === 'number') {
      // Just visit these, they are leaves so we don't keep traversing.
      visitor(element, null, context);
    }
    // TODO: Portals?
  }

function getQueriesFromTree({ component, context = {}, queries = []}: QueryTreeArgument) {

  if (!component) return;
  let { client, store } = context;

  // stateless function
  if (typeof component === 'function') component = { type: component };
  const { type, props } = component;

  if (typeof type === 'function') {
    let ComponentClass = type;
    let ownProps = getPropsFromChild(component);

     // see if this is a connect type
    if (typeof type.mapQueriesToProps === 'function') {
      const state = store.getState();
      const { mapStateToProps, mapDispatchToProps, mergeProps } = type.opts;
      const mappedState = mapStateToProps && mapStateToProps(state, ownProps);
      const mappedDisptach = mapDispatchToProps && mapDispatchToProps(store.dispatch, ownProps);
      const mergedProps = mergeProps && mergeProps(mappedState, mappedDisptach, ownProps);
      ownProps = assign(ownProps, mappedState, mappedDisptach, mergedProps);
      const data = type.mapQueriesToProps({ ownProps, state });
      for (let key in data) {
        if (!data.hasOwnProperty(key)) continue;

        ownProps[key] = assign({}, defaultReactProps);
        if (data[key].ssr === false) continue; // don't run this on the server

        queries.push({
          query: data[key],
          component: type.WrappedComponent,
          key,
          ownProps,
          context,
        });
      }

      ComponentClass = type.WrappedComponent;
    }

    const Component = new ComponentClass(ownProps, context);

    let newContext = context;
    if (Component.getChildContext) newContext = assign({}, context, Component.getChildContext());

    if (!store && ownProps.store) store = ownProps.store;
    if (!store && newContext.store) store = newContext.store;

    if (!client && ownProps.client && ownProps.client instanceof ApolloClient) {
      client = ownProps.client as ApolloClient;
    }
    if (!client && newContext.client && newContext.client instanceof ApolloClient) {
      client = newContext.client as ApolloClient;
    }

    getQueriesFromTree({
      component: getChildFromComponent(Component),
      context: newContext,
      queries,
    });
  } else if (props && props.children) {
    Children.forEach(props.children, (child: any) => getQueriesFromTree({
      component: child,
      context,
      queries,
    }));
  }

  return { queries, client, store };
}