• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript react.Children类代码示例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文整理汇总了TypeScript中react.Children的典型用法代码示例。如果您正苦于以下问题:TypeScript Children类的具体用法?TypeScript Children怎么用?TypeScript Children使用的例子?那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。



在下文中一共展示了Children类的10个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: cloneItem

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)
  );
}
开发者ID:sniphpet,项目名称:react-contexify,代码行数:10,代码来源:cloneItem.ts


示例2: render

 public render() {
   if (this.props.children) {
     return React.Children.only(this.props.children);
   } else {
     return null;
   }
 }
开发者ID:CNManning,项目名称:DefinitelyTyped,代码行数:7,代码来源:react-side-effect-tests.ts


示例3:

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;
};
开发者ID:Popmotion,项目名称:popmotion,代码行数:8,代码来源:children.ts


示例4: findChildrenOfType

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;
}
开发者ID:Enrique8191,项目名称:cockroach,代码行数:21,代码来源:find.ts


示例5: setChildrenLayoutParams

  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]);
  }
开发者ID:maolion,项目名称:mao-rn-android-kit,代码行数:42,代码来源:layout.ts


示例6: getKeys

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 };
};
开发者ID:Popmotion,项目名称:popmotion,代码行数:90,代码来源:children.ts


示例7:

const getKeys = (
  children: React.ReactElement<any> | Array<React.ReactElement<any>>
): string[] =>
  Children.toArray(children)
    .filter(Boolean)
    .map(getKey);
开发者ID:Popmotion,项目名称:popmotion,代码行数:6,代码来源:children.ts


示例8: walkTree


//.........这里部分代码省略.........
        // (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?
}
开发者ID:apollostack,项目名称:react-apollo,代码行数:101,代码来源:walkTree.ts


示例9:

export const isEmptyChildren = (children: any): boolean =>
  React.Children.count(children) === 0;
开发者ID:kurienkoa,项目名称:formik,代码行数:2,代码来源:utils.ts


示例10: componentWillMount

    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);
开发者ID:ArtemGovorov,项目名称:reactjs-hackathon-kit,代码行数:30,代码来源:SplitReducer.ts



注:本文中的react.Children类示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript react.DOM类代码示例发布时间:2022-05-25
下一篇:
TypeScript react.useState函数代码示例发布时间:2022-05-25
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap