如果 Map 內部的條件 // React JS

Question

我正在研究返回鏈接的 React JS 中的 Breadcrumb 組件。 在我的 header 中綁定組件時，我給它一個項目數組（鏈接標簽 URL 和 class 用於“活動”或“非活動”）。

現在，在此數據的映射中，我想檢查 class 是否“無效”，如果是這種情況，我想將“到”鏈接（to = {to}）設置為空字符串。 我沒有成功嘗試在 ≤Link≥ 組件周圍使用 if 條件，有誰知道這是否可行以及正確的語法是什么？

const items = [
    {to: '/link1', label: 'Step 1', stepClass: 'active'},
    {to: '/link2', label: 'Step 2', stepClass: 'inactive'},
];

<Breadcrumb>
      {items.map(({to, label, stepClass}) => (
        <Link key={to} to={to}>
          <div className={`step ${stepClass}`}>{label}</div>
        </Link>
      ))}
 </Breadcrumb>

Answer 1

也許像

const items = [
    {to: '/link1', label: 'Step 1', stepClass: 'active'},
    {to: '/link2', label: 'Step 2', stepClass: 'inactive'},
];

<Breadcrumb>
      {items.map(item => (
        <Link key={item.to} to={item.stepClass == active ? item.to : ''}>
          <div className={`step ${item.stepClass}`}>{label}</div>
        </Link>
      ))}
 </Breadcrumb>

Answer 2

您還可以在反應中使用 if-else 塊，並從 if-else 塊返回 jsx。

const items = [
    {to: '/link1', label: 'Step 1', stepClass: 'active'},
    {to: '/link2', label: 'Step 2', stepClass: 'inactive'},
];

<Breadcrumb>
      {items.map(({to, label, stepClass}) => {
        if(stepClass === "inactive")
         {
            return (
                    <Link key={to} to={to}>
                        <div className={`step ${stepClass}`}>{label}</div>
                    </Link> 
                 );
         }
         else 
         {
              return (

                // code here
              );
          }

      })}
 </Breadcrumb>