React Native如何基于Picker选中值动态渲染对应组件

问题核心原因 #

• Picker.Item的value属性仅支持可序列化的基础类型值（字符串、数字等），不支持直接传入JSX组件实例作为值，这是你初始写法的逻辑错误。
• 导入语法错误：你的InfoA/B/C都是export default默认导出的，但是你用了import { infoA }的命名导入语法，同时大小写不匹配（组件类名是大写开头的InfoA，你导入写的是小写infoA），这就是报Element type is invalid错误的核心原因，哪怕用switch写法，导入错误的前提下依然会找不到组件报错。

正确实现方案 #

第一步：修正导入语法 #

把导入部分改为默认导入的写法，注意大小写和组件导出的类名保持一致：

// 去掉导入时的大括号
import InfoA from "./InfoA";
import InfoB from "./InfoB";
import InfoC from "./InfoC";

第二步：调整Picker值为字符串标识，用对象映射渲染对应组件 #

这种方案比switch写法更易维护，后续新增选项只需要补充映射关系即可，效率更高：

import { View, Text } from "react-native";
import { Picker } from "@react-native-picker/picker";
import React, { Component } from 'react';
// 修正后的组件导入
import InfoA from "./InfoA";
import InfoB from "./InfoB";
import InfoC from "./InfoC";

// 定义组件映射表：key为Picker的选中值，value为对应要渲染的组件
const COMPONENT_MAP = {
  a: InfoA,
  b: InfoB,
  c: InfoC
}

export default class PickerSample extends Component {
  constructor(props){
    super(props);
    this.state = {
      selected: 'a' // 可设置默认选中项
    };
  }
  onValueChange(value) {
    this.setState({
      selected: value
    });
  }
  render(){
    const SelectedComponent = COMPONENT_MAP[this.state.selected];
    return(
      <View>
        <Picker
          selectedValue={this.state.selected}
          onValueChange={this.onValueChange.bind(this)}
        >
          {/* value仅传字符串标识即可 */}
          <Picker.Item label="Information Item A" value="a" />
          <Picker.Item label="Information Item B" value="b" />
          <Picker.Item label="Information Item C" value="c" />
        </Picker>
        {/* 渲染选中的组件 */}
        <SelectedComponent />
      </View>
    )
  }
}

可选：switch写法（前提是先修正导入错误） #

如果你更习惯switch写法，修正导入后可以按如下方式实现：

// 新增渲染选中组件的方法
renderSelectedComponent = () => {
  switch(this.state.selected) {
    case 'a':
      return <InfoA />
    case 'b':
      return <InfoB />
    case 'c':
      return <InfoC />
    default:
      return <Text>请选择选项</Text>
  }
}

render() {
  return (
    <View>
      {/* Picker部分和上述实现一致 */}
      <Picker
        selectedValue={this.state.selected}
        onValueChange={this.onValueChange.bind(this)}
      >
        <Picker.Item label="Information Item A" value="a" />
        <Picker.Item label="Information Item B" value="b" />
        <Picker.Item label="Information Item C" value="c" />
      </Picker>
      {/* 调用方法渲染对应组件 */}
      {this.renderSelectedComponent()}
    </View>
  )
}

内容的提问来源于stack exchange，提问作者marahman