如何使用字符串或状态动态切换反应组件？

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

干杯:)