React-Native: come avvolgere componenti bambino sotto un altro componente della classe

Question

Mi spiego la mia domanda con un esempio:

in SomeComponent.js ho il seguente

export default class SomeComponent extends React.Component { 
    render() { 
    return (
     <View style={{flex:1}}> 

     </View> 
    ) 
    } 
} 

e in esso Root.js importa 'SomeComponent' come segue

import SomeComponent from './SomeCoponent' 
export default class SomeComponent extends React.Component { 
    render() { 
    return (
     <SomeComponent> 
      <Text> hello </Text> 
     </SomeComponent> 
    ) 
    } 
} 

Come funziona?

Ho visto alcuni blog dove alcune persone lo fanno:

export default class SomeComponent extends React.Component { 
    render() { 
    return (
     <View style={{flex:1}}> 

     {/* code added here - start */} 
     {React.Children.map(this.props.children, c => React.cloneElement(c, { 
      route: this.props.route 
     }))} 
     {/* code added here - end */} 

     </View> 
    ) 
    } 
} 

Ma questo non funziona per me.

Sto ottenendo il seguente errore:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components) 

Qualsiasi aiuto sarebbe apprezzato. Grazie

Answer 1

È possibile utilizzare questo frammento

export default class SomeComponent extends React.Component { 
    constructor(props) { 
    super(props) 
    } 

    render() { 
    return (
     <View style={{flex:1}}> 
     {this.props.children} 
     </View> 
    ) 
    } 
} 

Answer 2

Si può fare in questo modo

export default class SomeComponent extends React.Component { 
    render() { 
    return (
     <View> 
     {this.props.children} 
     </View> 
    ) 
    } 
} 

YupeComponent.js

import 'SomeComponent' from 'app/component/Somecomponent' 
export default class YupeComponent extends React.Component { 
    render() { 
    return (
     <View style={{flex:1}}> 
     <SomeComponent /> 
     </View> 
    ) 
    } 
}