TypeScript react.Children类代码示例

export function cloneItem(
  children: ReactNode,
  props: { nativeEvent: TriggerEvent; propsFromTrigger?: object }
) {
  return Children.map(
    // remove null item
    Children.toArray(children).filter(child => Boolean(child)),
    item => cloneElement(item as ReactElement<any>, props)
  );
}

 public render() {
   if (this.props.children) {
     return React.Children.only(this.props.children);
   } else {
     return null;
   }
 }

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

export function findChildrenOfType(children: React.ReactNode, type: any) {
  let matchingChildren: React.ReactElement<any>[] = [];
  let childrenToSearch = React.Children.toArray(children);
  while (childrenToSearch.length > 0) {
    let child = childrenToSearch.shift();
    if (!IsReactElement(child)) {
      continue;
    } else {
      if (child.type === type) {
        matchingChildren.push(child);
      }
      let { props } = child;
      if (props.children) {
        // Children added to front of search array for DFS.
        childrenToSearch.unshift(...React.Children.toArray(props.children));
      }
    }
  }

  return matchingChildren;
}

  static setChildrenLayoutParams(
    component: React.Component<ViewGroupProperties, any>,
    manager: any,
    defaultParams?: any): void {

    if (!component || !manager) {
      return;
    }

    let currentChildrelLayoutParams = (component as any).__currentChildLayoutParams;

    let nextChildrelLayoutParams: any[] = [];
    const hasDefaultParams = !!defaultParams;

    React.Children.map(component.props.children || [], (child: any, index: number) => {
      if (!child.props.layoutParams && !hasDefaultParams) {
        return;
      }

      nextChildrelLayoutParams.push(Object.assign(
        {},
        defaultParams,
        child.props.layoutParams,
        { childIndex: index }
      ));
    });

    if (!nextChildrelLayoutParams.length) {
      return;
    }

    if (layoutParamsIsEqualTo(currentChildrelLayoutParams, nextChildrelLayoutParams)) {
      return;
    }

    (component as any).__currentChildLayoutParams = nextChildrelLayoutParams;

    UIManager.dispatchViewManagerCommand(
      findNodeHandle(component),
      manager.Commands.setChildrenLayoutParams,
      [nextChildrelLayoutParams]);
  }

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

const getKeys = (
  children: React.ReactElement<any> | Array<React.ReactElement<any>>
): string[] =>
  Children.toArray(children)
    .filter(Boolean)
    .map(getKey);

//.........这里部分代码省略.........
        // (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;
      }

      let child;
      if (!!(element.type as any)._context) {
        // A provider - sets the context value before rendering children
        // this needs to clone the map because this value should only apply to children of the provider
        newContext = new Map(newContext);
        newContext.set(element.type, element.props.value);
        child = element.props.children;
      } else {
        // A consumer
        let value = (element.type as any)._currentValue;
        if (newContext.has((element.type as any).Provider)) {
          value = newContext.get((element.type as any).Provider);
        }
        child = element.props.children(value);
      }

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

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

export const isEmptyChildren = (children: any): boolean =>
  React.Children.count(children) === 0;

    routes: React.PropTypes.array,
  },
  contextTypes: {
    store: React.PropTypes.object,
  },

  componentWillMount() {
    this.updateReducerFromComponents();
  },

  componentWillReceiveProps(nextProps: any) {
    this.updateReducerFromComponents();
  },

  updateReducerFromComponents() {
    const {   routes } = this.props;
    this.props.router.listen((location) => {
      match({ location, routes }, (error, redirectLocation, renderProps) => {
        findAndReplaceReducerFromComponents(renderProps.components, this.context.store);
      });
    });

  },

  render() {
    return React.Children.only(this.props.children);
  },
});

export default withRouter(SplitReducer);