React-Native:如何将Child组件包装在另一个类组件下

Question

让我用一个例子来解释我的问题:

在SomeComponent.js中我有以下内容

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

      </View>
    )
  }
}

并在Root.js中导入'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>
    )
  }
}