React-Nativ: Untergeordnete Komponenten unter einer anderen Klasse Komponente

Question

Lassen Sie mich meine Frage mit einem Beispiel erklären wickeln:

in SomeComponent.js ich die

folgende habe es

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

     </View> 
    ) 
    } 
} 

und in Root.js Importe 'SomeComponent' wie folgt

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

Wie funktioniert das?

sah ich einige Blog, wo einige Leute dies tun:

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

Aber das ist für mich nicht funktioniert.

Ich erhalte die folgende Fehlermeldung:

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) 

Jede Hilfe würde geschätzt.

Dank

Answer 1

Sie können diese Schnipsel verwenden

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

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

Answer 2

Sie können es tun, wie diese

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