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

向箭头功能添加条件

4 个答案: