本文整理汇总了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;未经允许,请勿转载。 |
请发表评论