javascript - 如果所选按钮值等于对象的任何 `key`，我想将按钮的颜色设置为主要颜色

Question

如果 patient.locationInfo 等于 longName2ShortName 的任何 key，我想将按钮的颜色设置为主要颜色目的。

const longName2ShortName = {
        'Fishing': 'F',
        'Garden': 'G',
        'Running': 'R',
        'Shower': 'S',
        'Exercise': 'E',
        'Toilet': 'T',
    };

我试过了

    <div> 
        {patientInfo.map((patient, index) => {

    <Button bsStyle={Object.keys(longName2ShortName).map(key => key === patient.locationInfo? 'primary' : 'default')}> </Button> 

     )}
    </div>

我的代码出错

警告:失败的 Prop 类型:无效的 Prop bsStyle 值默认，默认，主要，默认，默认，默认，默认，默认，默认提供给按钮，预期 ["成功"，"警告"，之一“危险”，“信息”，“默认”，“主要”，“链接”]。

Answer 1

重读您的描述:如果 [some value] 等于对象 longName2ShortName 上存在的任何键，您希望将值设置为 primary。

所以结合这些。您可以使用 Object.keys() 检查对象是否具有特定键，但如果您还知道所有键都对应于真实值，那么这就真的很愚蠢了。我们可以只引用该对象，看看我们是否得到了一个值:

longName2ShortName[patient.locationInfo] // either some value, or `undefined`

因此，如果 patient.locationInfo 匹配其中一个键，这将是一个值，如果不匹配，则为 undefined，我们可以在三元，我们立即完成:

<Button
  bsStyle={ longName2ShortName[patient.locationInfo] ? `primary` : `default` }
  key={ patient.name }
/>

并记住 add that key attribute .这是将状态映射到 React 组件时的一个关键要求。 React 需要知道哪个组件映射到哪个对象，因此它可以正确应用差异，它使用 key 来实现。