文字列または状態を使用して反応コンポーネントを動的に切り替えるにはどうすればよいですか？

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

OKここに私達は行く：

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

乾杯:)