リアクションネイティブ - ダイナミックコンポーネントを作成

Question

私はhttps://reactnavigation.org/docs/navigators/tabからTabNavigatorを使用していますが、state.routeNameを使用してコンポーネントを動的に戻したいとします。

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



export default class DashboardSelectionTab extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 

    const {state} = this.props.navigation; 

私は「週」、「月」、すなわち「日」、ここで次state.routeNameを取得し、各タブの「カスタム」に応じて

const Day =() => (
     <Text>Day</Text> 
    ); 

    const Week =() => (
     <Text>Week</Text> 
    ); 

    const Month =() => (
     <Text>Month</Text> 
    ); 

    const Custom =() => (
     <Text>Custom</Text> 
    ); 

私はこれをしなかったが、私は構文を取得エラー。

return <{state.routeName } /> 
    } 
} 

助けが必要ですか？ありがとう。

Answer 1

このようにそれを書く：

return <div> 
      {this.renderComponent(state.routeName) } 
     </div> 



renderComponent(name){ 
    switch(name){ 
     case 'Day': return <Day/>; 
     case 'Month': return <Month/> 
     default: <Default/> 
    } 
} 

は作業例を確認してください：

const Day =() => (
 
    <div>Day</div> 
 
); 
 

 
const Week =() => (
 
    <div>Week</div> 
 
); 
 

 
const Month =() => (
 
    <div>Month</div> 
 
); 
 

 
const Custom =() => (
 
    <div>Custom</div> 
 
); 
 

 
class DashboardSelectionTab extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.state = {compName: 'Day'} 
 
    } 
 

 
    renderComponent(){ 
 
     switch(this.state.compName){ 
 
      case 'Day': return <Day/>; 
 
      case 'Month': return <Month/>; 
 
      case 'Week': return <Week/>; 
 
      case 'Custom': return <Custom/> 
 
     } 
 
    } 
 

 
    render() { 
 
\t return(
 
      <div> 
 
       \t {this.renderComponent() } 
 
       \t <br/> 
 
       \t <select 
 
       \t \t value={this.state.compName} 
 
       \t \t onChange={(event)=>this.setState({compName: event.target.value})} 
 
       \t > 
 
        \t <option value='Day'>Day</option> 
 
        \t <option value='Week'>Week</option> 
 
        \t <option value='Month'>Month</option> 
 
        \t <option value='Custom'>Custom</option> 
 
       </select> 
 
      </div> 
 
     ) 
 
    } 
 
} 
 

 

 
ReactDOM.render(<DashboardSelectionTab/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'/>