：私は</p> <pre><code>export default class SomeComponent extends React.Component { render() { return ( <View style={{flex:1}}> </View> ) } } </code></pre> <p>とRoot.jsそれに次きSomeComponent.jsで</p> <p>：私は一例で私の質問を説明させて別のクラスコンポーネント

Question

下の子コンポーネントをラップする方法次のように 'SomeComponent'をインポートします。

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

どのように機能しますか？

私は何人かの人々がこれを行う、いくつかのブログ見ました：

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

をしかし、これは私のために動作しません。任意の助けをいただければ幸いです

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) 

：

私は、次のエラーを取得しています。おかげ

Answer 1

あなたはこのスニペットに

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

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

Answer 2

を使用することができますあなたはこの

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