时间戳

首页 > 解决方案 > 在 react const 中使用枚举

reactjs - 在 react const 中使用枚举

问题描述

我需要将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

标签： reactjsdictionaryenumsconstantsreact-props

解决方案

如果您想检查枚举中的给定属性（例如“MOUNTAIN”）是否包含在从 api 返回的 features 数组中，您可以使用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" 
}

推荐阅读