如何使用字符串或狀態動態切換反應組件？

Question

希望腳本咆哮將大致顯示我想要實現的。

但實質上，使用存儲在狀態中的字符串，能夠讓組件持有者動態加載不同的組件。

所以你會看到在頂部進口2部分（但最好這些可能是100個不同的人。

保存組件的字符串名稱的currentSlide狀態。

而一個SlideLoader組件通過重置狀態名稱基於字符串的名字將載入理想進口元器件。

然後按鈕的開關組件。

謝謝！

import React, { Component } from 'react'; 
import { 
    View, 
    Text, 
    StyleSheet, 
} from 'react-native'; 

import SlideA from './slideA'; 
import SlideB from './slideB'; 

const styles = StyleSheet.create({ 
    dummyContainer: { 
    flex: 0, 
    alignItems: 'center', 
    justifyContent: 'center', 
    position: 'absolute', 
    top: 0, 
    bottom: 0, 
    left: 0, 
    right: 0, 
    backgroundColor: '#999999', 
    }, 
    buttonHolder: { 
    position: 'absolute', 
    top: 4, 
    left: 0, 
    }, 
    button: { 
    height: 50, 
    width: 300, 
    backgroundColor: 'red', 
    marginBottom: 4, 
    textAlignVertical: 'center', 
    textAlign: 'center', 
    fontWeight: 'bold', 
    }, 
}); 

export default class Switcher extends Component { 
    constructor(props, context) { 
    super(props, context); 
    let state = { 
     currentSlide: 'SlideA', 
    } 
    } 

    render() { 
    // obvisously wrong part... 
    let SlideLoader = this.state.currentSlide; 
    // end of obvisously wrong part... 

    return (
     <View 
     style={[ 
      styles.dummyContainer, 
     ]} 
     > 

     <SlideLoader /> 

     <View 
      style={styles.buttonHolder} 
     > 
      <Text 
      onPress={() => { 
       console.log('SLID A'); 
       setState({ currentSlide: 'SlideA' }); 
      }} 
      style={[styles.button]} 
      > 
      Slide A 
      </Text> 
      <Text 
      onPress={() => { 
       console.log('SLID B'); 
       setState({ currentSlide: 'SlideB' }); 
      }} 
      style={[styles.button]} 
      > 
      Slide B 
      </Text> 
     </View> 
     </View> 
    ); 
    } 
} 

Answer 1

確定在這裏，我們去：

render() { 
    let SlideLoader; 
    if(this.state.currentSlide == 'SlideA') 
    SlideLoader=<SlideA /> 
    else 
    SlideLoader=<SlideB /> 

    return (
     <View 
     style={[ 
      styles.dummyContainer, 
     ]} 
     > 

     {SlideLoader} 

     <View 
      style={styles.buttonHolder} 
     > 
      <Text 
      onPress={() => { 
       console.log('SLID A'); 
       setState({ currentSlide: 'SlideA' }); 
      }} 
      style={[styles.button]} 
      > 
      Slide A 
      </Text> 
      <Text 
      onPress={() => { 
       console.log('SLID B'); 
       setState({ currentSlide: 'SlideB' }); 
      }} 
      style={[styles.button]} 
      > 
      Slide B 
      </Text> 
     </View> 
     </View> 
    ); 
    } 

乾杯:)