一种缩短此代码的方法答案

【问题标题】：A way to shorten this code一种缩短此代码的方法
【发布时间】：2018-08-30 03:34:59
【问题描述】：

有什么办法可以缩短这段代码吗？唯一的区别是我希望在索引 0 处显示“全部”而不是数组值。

或者可能是多个条件？比如在 index = 0，这样做，索引是 %2，这样做，最后一个索引，这样做？

我也找到了相同的解决方案。我现在又遇到了一个问题，

我想在 onClick 中的两个函数之间进行选择。

<a onClick={()=>{AddNewBookmark(userId, newsId); this.changeBookmarkState(isBookmarked, bookmarkIndex);}}>

我希望 index == 0 使用 AddNewBookmark(userId, newsId) 或者如果 index == 1 则使用 RemoveBookmark(userId, newsId)。

<a onClick={()=>{ index == 0 ? AddNewBookmark(userId, newsId) : 
 RemoveBookmark(userId, newsId); this.changeBookmarkState(isBookmarked, 
 bookmarkIndex);}}>

无论索引值是什么，我都希望包含 changebookmarkstate。

我的尝试没有成功。有什么建议吗？

【问题讨论】：

调用API从数据库中删除一条记录
不要重新编辑完整的问题 - 删除并创建新问题
你以后最好在CodeReview问这种问题。这不是题外话，但该网站致力于改进已经工作的代码。

标签： reactjs typescript

【解决方案1】：

由于您所做的只是更改在跨度中呈现的内容，因此您可以在跨度内的 JSX 中执行您的逻辑

这应该可行：

isFiltered[index] && (
   <div key={index}>
     <span>{index == 0 ? "All" : category['Name']}</span>              
   </div>        
);

您也可以将此逻辑提取到一个函数中，然后在 span 中调用该函数。如果您最终想要在该范围内显示一堆不同的结果，这会更清晰。像这样的：

helperFucntion(index: number) => (
   index == 0 ? "All" : category['Name']
)

isFiltered[index] && (
   <div key={index}>
     <span>{helperFunction(index)}</span>              
   </div>        
);

【讨论】：

这对选择功能有用吗？调用的 == ?: 运算符是什么？
它是一个三元运算符。与使用相同的结果：if (index == 0) {return "All"} else {return category['Name']}

【解决方案2】：

您的代码的最短形式可能是这样的：

isFiltered[index] && return (
          <div key={index}>
              <span">{ index ? "ALL" : category['Name'] }</span>              
         </div>        
);

【讨论】：

它将忽略索引 0 上的第一个类别名称
我不知道业务逻辑，我只是缩短了 Khoa 的代码
我只想让第一列例如显示“全部”和其余类别名称。这意味着我希望它为索引 0 选择“全部”，其余为“名称”
修改模板如下：<span">{ index ? "ALL" + category['Name'] : category['Name'] }</span>

【解决方案3】：

您的代码似乎不完整，因此我无法确定，但您可以根据需要使用以下代码。

你可以在数组的开头插入一个新的索引。

isFiltered.unshift['All'];

if (isFiltered[index]){
    return (
        <div key={index}>
            <span>{ category['Name']}</span>              
        </div>        
    );                   
}

【讨论】：