Ich muss verschiedene Wrapper verwenden, um den Bildschirm basierend auf einer bestimmten Bedingung zu rendern. Beispiel: Ich habe eine Situation, in der ich den Inhalt in eine Ansicht einschließen muss

      <View>
         <Text> </Text>
         <View> </View>
         { and other elements here }
      </View>

In einem anderen Szenario muss die Ansicht jedoch Inhalt von nativeBase sein. Wenn die Variable useContent true ist, rendern Sie alles mit Content als Wrapper, andernfalls verwenden Sie View. Wie würde ich das am besten machen?

2
MichaelM 18 Jän. 2019 im 13:32

3 Antworten

Beste Antwort

Verwenden Sie einen ternären Operator, um das bedingte Rendern zu unterstützen.

render() {
  const useContent = true;

  return useContent ? (
    <Content>
      <Text></Text>
      <View></View>
    </Content>
  ) : (
    <View>
      <Text></Text>
      <View></View>
    </View>
  )
}

Es kann auch besser sein, diese beiden Teile in ihre eigenen Komponenten zu extrahieren. Nur damit Ihre Komponentendatei nicht zu groß wird und die Wartbarkeit ein Problem darstellt. Bearbeiten: Wenn Sie die untergeordneten Elemente der Komponente beibehalten und nur das zu ändernde Wrapping-Element beibehalten möchten, erstellen Sie eine zweite Komponente, die untergeordnete Elemente rendert:

class WrappingElement extends Component {
  render() {
    const { children, useContent } = this.props;

    return useContent ? (
      <Content>{children}</Content>
    ) : (
      <View>{children}</View>
    )
  }
}

class Foo extends Component {
  render() {
    <WrappingElement useContent={false}>
      <Text>Hello World!</Text>
      <View></View>
    </WrappingElement>
  }
}
1
Josh Kelly 18 Jän. 2019 im 10:51
<View>
     booleanCondition1() && <Text> </Text>
     booleanCondition2() && <View> </View>
     booleanConditionN() && { and other elements here }
</View>
0
David 18 Jän. 2019 im 10:35
<View>
  {condition == true ?
    (
      <Text> </Text>
      <View> </View>
    )
    :
    (
      { and other elements here }
    )
  }
</View>
0
SmoggeR_js 18 Jän. 2019 im 10:39