在 React const 中使用枚举

Question

我需要将 enum 值映射到 1 个变量，然后调用该变量并检查该枚举是否存在。

render() {
    const {
        id,
        name,
        features} = this.props;
}

特征将是需要根据传入的枚举进行映射的变量。我会从 API:

中得到类似的东西

{"id":"111", "name":"jack", "features":["MOUNTAIN", "HILL"]}

所以总共会有 4 个不同的 features : MOUNTAIN, HILL, LAKE, FISH。
然后在需要的时候我可以检查：

if(features.mountain)
    //do stuff

Answer 1

如果您想检查枚举中给定的属性（例如 "MOUNTAIN"）是否包含在从 api 返回的特征数组中，您可以使用 Array.prototype.includes() 方法：

if(featuresArrayfromApi.includes('MOUNTAIN'){
   //do stuff
}

如果您想检查从 api 返回的特征是否包含特征枚举中的一个或多个属性，您可以将 includes 与 Array.prototype.some() 结合使用。

例如，在 Typescript 中，您可以这样写：

enum Features { MOUNTAIN, HILL, LAKE, FISH }

if(Object.keys(Features)
 .some(feature => featuresFromApi.includes(feature))){
   // do stuff
}

编辑

来自 api 数据的 features 键应该像任何其他键一样被映射（id，name）——只是不是保存 1 个值，而是保存一个大批。然后您可以在 if 子句中使用上面建议的验证。例如：

const data = [
    {"id":"111", "name":"jack", "features":["MOUNTAIN", "HILL"]},
    {"id":"222", "name":"john", "features":["FISH", "HILL", "LAKE"]}
    {"id":"333", "name":"joe", "features":["LAKE", "HILL", "FISH"]}

    ]

    data.map(record =>{

      console.log(record.id); 
      console.log(record.name);

      if (record.features.includes('MOUNTAIN'){
          // do stuff
        }          
    })

此外，请记住 enum 是一个 Typescript 符号，在 Javascript 中不可用，因此如果您不使用 Typescript，您可以像这样声明它，它会工作相同：

const Features =  { 
 MOUNTAIN: "MOUNTAIN",
 HILL: "HILL",
 LAKE, "LAKE",
 FISH: "FISH" 
}

在 React const 中使用枚举

Using enums in react const

enums

dictionary

constants

reactjs

react-props