Pytanie React-Native: jak zawijać komponenty potomne pod innym komponentem klasy


Pozwól mi wyjaśnić moje pytanie na przykładzie:

w SomeComponent.js Mam następujące

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

      </View>
    )
  }
}

a w Root.js importuje "SomeComponent" w następujący sposób

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

Jak to działa?

Widziałem bloga, w którym niektórzy ludzie to robią:

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

Ale to nie działa dla mnie.

Otrzymuję następujący błąd:

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)

Każda pomoc będzie doceniona. Dzięki


14
2018-02-22 06:44


pochodzenie




Odpowiedzi:


Możesz użyć tego snippet

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

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

20
2017-07-29 09:52



Dziękuję Ci. To rozwiązanie działało dla mojej klasy opakowania. - Rich Rosiak


Możesz to zrobić w ten sposób

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

3
2018-02-19 07:00