如何通过 props 传递字符串，然后将其用作 React Native 组件标签中的值？

Question

我有一个字符串名称标签，我通过道具将它从 'Main' 组件传递到 'Details' 组件，并希望使用该标签字符串在 [=18 之类的 Details 的渲染函数中使用=]

在 'Details' 的渲染函数中试过这个，没用

render() {
    const Tagname = this.props.navigation.getParam('component', 'Component Does not exist')
    return (
      <Container>
        <Tagname/>
      </Container>
    )
  }

const Tagname 的值为 Basic（控制台记录），我创建并正确导入了一个名为 Basic

的组件

这是主要内容：

import React, { Component } from "react";
import { View, Text, Button } from 'react-native';
export default class Main extends Component {
  render() {
    <View>
      <Text
        style={styles.texts}
        onPress={()=> {
          this.props.navigation.navigate('Details', {
            component: 'Basic'
          })
        }}
      >
        {elem}
      </Text>
    </View>
  }
}

路由器：

import React from 'react';
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation';
import Details from './Details'
import Main from './Main'

const AppNavigator = createStackNavigator({
  Home: {
    screen: Main,
  },
  Details: {
    screen: Details,
  },
}, {
    initialRouteName: 'Home',
});

export default createAppContainer(AppNavigator);

详情：

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import Basic from './Basic.js'

export default class Details extends Component {
  render() {
    const Tagname = this.props.navigation.getParam('component', 'Component Does not exist')
    return (
      <View>
        <Tagname/>
      </View>
    )
  }
}

基础：

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

export default class Basic extends Component {
  render() {
    return (
      <View>
        <Text>Hello world</Text>
      </View>
    )
  }
}

Answer 1

我不太明白你想做什么。你只想通过 props 显示一个字符串吗？像这样：

  render() {
    const tagName = this.props.tag;
    return (
      <View>
        <Text>{tagName}</Text>
      </View>
    )
  }

Answer 2

如果你想将字符串映射到相应的组件，你可以使用一个对象，像这样：

import Basic from './Basic';

const components = {
  Basic,
};

在你的渲染函数中：

render() {
    const Tagname = this.props.navigation.getParam('component', 'Component Does not exist');
    const Component = components[Tagname];
    return (
      <Container>
        <Component/>
      </Container>
    )
  }

如何通过 props 传递字符串，然后将其用作 React Native 组件标签中的值？

How do you pass a string via props then use that as a value in the component tag in React Native?

javascript

reactjs

react-native

react-props