Question

我的redux商店中有一个模态数组，如下所示：

$array = [
    ['TYPE'=>'PHOTOS'],
    ['TYPE'=>'DOCUMENTS'],
    ['TYPE'=>'VIDEOS']
    ];

function customOrder($a, $b){
    $newOrder = [
      'PHOTOS' => 1,
      'VIDEOS' => 2,
      'DOCUMENTS' => 3
    ];

    $valA = (array_key_exists($a['TYPE'],$newOrder))?$newOrder[$a['TYPE']]:999;
    $valB = (array_key_exists($b['TYPE'],$newOrder))?$newOrder[$b['TYPE']]:999;

    if($valA > $valB){
        $result = 1;
    } elseif($valA < $valB){
        $result = -1;
    } else {
        $result = 0;
    }
    return $result;
}

usort($array, "customOrder");
var_dump($array);

在我的React组件中，我希望显示简单的条件语句或不显示我的模态。我在设置条件陈述方面遇到了一些麻烦。

modals: [
        {id: "modal1", isDisplayed: false},
        {id: "modal2", isDisplayed: true}
    ]

检查我的模态数组中给定模态的isDisplayed属性的正确语法是什么？

Answer 1

商店中的modals属性为Array。您无法通过id访问它。

此代码可以使用：

{ this.props.modals[0].isDisplayed && <Modal1 /> }
{ this.props.modals[1].isDisplayed && <Modal2 /> }

或者，您可以按以下方式存储它：

modals: {
  modal1: { isDisplayed: false },
  modal2: { isDisplayed: true },
}

然后你的代码就可以了。

Answer 2

我建议使用Array.find，但是在没有空合并运算符的表达式中无法很好地内联。

当找不到模态时（find返回undefined时）会中断

{ this.props.modals.find(x => x.id === "nonexistingmodal").isDisplayed && <ModalXYZ /> }

使用一个小帮助函数，您可以安全地实现它，只需稍作更改代码：

const select = (from, selector) => from && selector(from)

{ select(this.props.modals.find(x => x.id === "modal3"), x => x.isDisplayed) && <Modal3 /> }

您应该考虑使用Map或仅使用普通对象作为模态商店来表达关键关系。

在条件语句中使用数组中的项

2 个答案: