在React或React Native中如何使用后缀动态变化的变量？

你当前的写法无法生效的原因是：JavaScript 会把GUEST_guestNumber识别为一个完整的独立变量，不会自动将guestNumber替换为你传入的参数值，因此才会提示变量未定义。

最优解决方案：将同格式变量收纳为对象/数组 #

这是最规范、可维护性最高的实现方式，你只需要把原本分散定义的GUEST_1、GUEST_2、GUEST_3统一放到一个对象或者数组中即可：

// 方式1：用对象存储，键对应数字编号
const GUEST_CONTENT = {
  1: "GUEST_1对应的文本内容",
  2: "GUEST_2对应的文本内容",
  3: "GUEST_3对应的文本内容"
}

// 方式2：用数组存储，索引和编号差1即可
// const GUEST_CONTENT = ["GUEST_1对应的文本内容", "GUEST_2对应的文本内容", "GUEST_3对应的文本内容"]

之后修改你的组件代码，通过动态键名取值即可：

const guest = (guestNumber) => {
  return (
    <View>
      {/* 对象取值写法 */}
      <Text>{GUEST_CONTENT[guestNumber]}</Text>
      {/* 数组取值写法：<Text>{GUEST_CONTENT[guestNumber - 1]}</Text> */}
    </View>
  );
};

不推荐的实现方式 #

不要使用eval拼接变量名取值，例如eval(GUEST_${guestNumber})，这种写法存在安全隐患，同时会影响代码可维护性和运行性能，完全不推荐在生产环境使用。

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