parse(children, key = 0) { if (typeof children === 'string') { return this.parseString(children); } if (React.isValidElement(children) && children.type !== 'a' && children.type !== 'button') { return React.cloneElement(children, { key }, this.parse(children.props.children)); } if (Array.isArray(children)) { return children.map((child, i) => this.parse(child, i)); } return children; }
const Suffix = ({ children }) => { const suffix = React.Children.map(children, child => { if (React.isValidElement(child)) { return React.cloneElement(child, { size: 16, }); } return child; }); return <View style={styles.suffix}>{suffix}</View>; }
function ProviderComposer({ contexts, children }) { return contexts.reduceRight( (children, parent) => React.cloneElement(parent, { children: children, }), children ); }
renderItem(child, index) { const key = child.key || index; const props = { key }; if (this.props.accordion) { props.onExpanded = createChainedFunction( this.handleItemExpanded(key), child.props.onExpanded, ); props.expanded = this.state.expandedKey === key; } return cloneElement(child, props); }
const styleIcon = ( icon: ?React.Element<typeof Icon>, type: ButtonType, size: IconSize, ): React.Element<typeof Icon> | null => { return icon ? React.cloneElement(icon, { color: textColor[type], size: size, }) : null; }
export function ListRenderer({ classes, ordered, children }) { const Tag = ordered ? 'ol' : 'ul'; const classNames = cx(classes.list, ordered && classes.ordered); return ( <Tag className={classNames}> {Children.map(children, li => cloneElement(li, { className: classes.li }))} </Tag> ); }
renderChildren() { const { microdata, mydata, children } = this.props; let items = []; React.Children.map(children, (child, i) => { items.push(cloneElement(child, { key: i, microdata: microdata, mydata: mydata })); }); return items; }
React.createClass({ render: function() { return ( <div className='main-container'> <ReactCSSTransitionGroup transitionName="appear" transitionEnterTimeout={500} transitionLeaveTimeout={500}> {React.cloneElement(this.props.children, {key: this.props.location.pathname})} </ReactCSSTransitionGroup> </div> ); } })
render() { const children = Children.map(this.props.children, child => { return child ? cloneElement(child, this.controlProps) : null }) return <Fragment>{children}</Fragment> }
sections.map(section => { return cloneElement(section, { className: classes }) })
function ButtonGroup({ children, ...props }, context) { // We can pull in `handleClick` and `speed` from context like this. const { handleClick, speed } = context[COG_SPINNER_CONTEXT]; // Mapping over children to add an active prop and add our handleClick function. // Because we're handling all the wiring here, it makes our API really simple to use. const mappedChildren = Children.map(children, child => { const active = speed === child.props.name; return cloneElement(child, { active, onClick: handleClick }); }); return <ButtonGroupBlock {...props}>{mappedChildren}</ButtonGroupBlock>; }
renderChildren() { const { microdata, mydata, children } = this.props; let items = []; React.Children.map(children, (child, i) => { items.push(cloneElement(child, { key: i, microdata: microdata, mydata: mydata })); }); return items; }
React.createClass({ render: function() { return ( <div className='main-container'> <ReactCSSTransitionGroup transitionName="appear" transitionEnterTimeout={800} transitionLeaveTimeout={800}> {React.cloneElement(this.props.children, {key: this.props.location.pathname})} </ReactCSSTransitionGroup> </div> ) } })
React.createClass({ render: function(){ return ( <div className="main-container"> <ReactCSSTransitionGroup transitionName='appear' transitionEnterTimeout={300} transitionLeaveTimeout={300} > {React.cloneElement(this.props.children, {key: this.props.location.pathname})} </ReactCSSTransitionGroup> </div> ); } })
React.createClass({ render: function(){ return ( <div className="main-container"> <ReactCSSTransitionGroup transitionName='appear' transitionEnterTimeout={300} transitionLeaveTimeout={300} > {React.cloneElement(this.props.children, {key: this.props.location.pathname})} </ReactCSSTransitionGroup> </div> ); } })