向箭头功能添加条件

Question

我有以下代码片段，

  {categoriesWithSub.length > 0 &&
     categoriesWithSub.map(item => {
    //Add new condition here
      const pageChanges = {
        catId: item.id,
        catName: item.catName,
      };
      return (
        <Tile
          to="./request"
          text={item.catName}
          key={item.id}
          onClick={() => handleChange('departments', pageChanges)}
        />
      );
    })}

如何在item上添加以下子条件，类似于：

item.subCategories.length > 0 ?
return (...): 
retrun (  
    <Tag
        text={''}
        to="../exact-request"
        key={0}
        onClick={() => handleChange('request', '')}
    />

我尝试过，但语法有问题：

{categoriesWithSub.length > 0 &&
    categoriesWithSub.map(item => {
      item.subCategories.length > 0 ?(
      const pageChanges = {
        catId: item.id,
        catName: item.catName,
      };
      return (
        <Tile
          to="./request"
          text={item.catName}
          key={item.id}
          onClick={() => handleChange('departments', pageChanges)}
        />
      );
      ):
      retrun (
       <Tag
          text={''}
          to="../exact-request"
          key={0}
          onClick={() => handleChange('request', '')}
        />
      )
    })}

Answer 1

我不确定我完全按照你想要的那样，但你可以在那里添加条件。但我会说在渲染中执行此操作是不好的做法，在渲染中你应该渲染它应该是一个函数或组件。

{
  categoriesWithSub.length > 0 &&
    categoriesWithSub.map(item => {
      if (item.subCategories.length > 0 ) {
        return something
      }
      return somethingElse
    })
}

或者如果你坚持使用ternars

{
  categoriesWithSub.length > 0 &&
    categoriesWithSub.map(item => {
      return item.subCategories.length > 0 ?
        something :
        somethingElse
    })
}

Answer 2

return (item.subCategories.length > 0) ?
(...): 
(  
    <Tag
        text={''}
        to="../exact-request"
        key={0}
        onClick={() => handleChange('request', '')}
    />
)

Answer 3

这有点陌生，但很简单：

return item.subCategories.length > 0 ?
(
    <Some ... />
) :
(
    <Tag
    text={''}
    to=../exact-request
    key={0}
    onClick={() => handleChange('request', '')}
/>
);

但我建议你编写这样的代码：

if (item.subCategories.length > 0) {
    return <Some ... />
}

return (
        <Tag
        text={''}
        to=../exact-request
        key={0}
        onClick={() => handleChange('request', '')}
    />)

您的代码必须是可读的

Answer 4

如果出现错误，您可以在开头返回该条件：

{categoriesWithSub.length > 0 &&
   categoriesWithSub.map(item => {
   const someCondition = <...>
   if (!someCondition) return false;
   // rest of your code