React Native：如何用变量替代组件名动态渲染自定义组件？

你遇到的报错原因很明确：直接用props.character传入的字符串（比如'Larry'）作为组件渲染，React Native需要的是组件的实际引用，而不是字符串名称，所以才会提示“View config getter callback for component [NAME] must be a function”。

解决方法是建立一个字符名称到组件的映射表，把字符串和对应的组件引用关联起来，替代冗余的switch/case：

修改后的完整代码：

import React from 'react';
import Larry from './characters/larry';
import Jane from './characters/jane';
import Reginald from './characters/reginald';
import Amy from './characters/amy';

// 字符名称与组件的映射对象
const CHARACTER_COMPONENTS = {
  Larry,
  Jane,
  Reginald,
  Amy
};

const CharacterFactory = (props) => {
  // 通过字符名称从映射中获取组件
  const CharacterComponent = CHARACTER_COMPONENTS[props.character];

  // 处理传入不存在字符的情况，避免报错
  if (!CharacterComponent) {
    return null; // 也可以返回一个默认占位组件
  }

  return (
    <CharacterComponent
      top={props.top}
      bottom={props.bottom}
      shoes={props.shoes}
    />
  );
};

export default CharacterFactory;

关键说明 #

• 映射对象CHARACTER_COMPONENTS把字符串形式的字符名和导入的组件引用绑定，这样通过props.character就能直接拿到要渲染的组件。
• 新增了不存在字符的判断逻辑，防止传入无效字符时出现额外错误。
• 后续新增字符时，只需要导入组件并在映射对象中添加一行，无需修改渲染逻辑，代码扩展性更强。

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