Phản ứng-Quê quán: Làm thế nào để quấn thành phần Trẻ em dưới một thành phần lớp

Question

Hãy để tôi giải thích câu hỏi của tôi với một ví dụ:

trong SomeComponent.js Tôi đã sau

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

     </View> 
    ) 
    } 
} 

và trong Root.js nó nhập 'SomeComponent' như sau

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

Cách này hoạt động?

tôi thấy một số blog, nơi một số người làm điều này:

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

Nhưng điều này không làm việc cho tôi.

Tôi nhận được lỗi sau:

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) 

Bất kỳ trợ giúp sẽ được đánh giá cao. Cảm ơn

Answer 1

Bạn có thể sử dụng đoạn mã này

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

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

Answer 2

Bạn có thể làm điều đó như thế này

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