如何在反应中添加多个条件？

Question

我有按钮 Description。单击时显示说明。现在我想在描述中添加 Read more/less。

使用belpw代码，我没有看到按钮Description，直接显示描述

Flow- 显示按钮-> 单击时-> 显示 200 个字符的文本（带有阅读更多选项）

  const [readMore, setReadMore] = useState(false);


  const [displaydescription, setDisplayDescription] = useState(false);
  const clickHandler = () => {
    setDisplayDescription(true);
  };

 <p>
          {displaydescription || readMore
            ? description
            : `${description.substring(0, 200)}`}
        </p>

Answer 1

您必须将代码更改为首先显示说明，然后在第二种情况下验证是否要显示完整文本，如下所示：

const [readMore, setReadMore] = useState(false);
const [displaydescription, setDisplayDescription] = useState(false);
const clickHandler = () => {
    setDisplayDescription(true);
};

 <p>
    {displaydescription 
       ? (
            readMore
               ? description
               : `${description.substring(0, 200)
         )
       : null}`
    }
 </p>

Answer 2

在 React jsx 中添加条件的语法是 {condition && } 所以你可以试试

{ description && !readmore 
  <p> `${description.substring(0, 200)}` <p>
}
{ description && readmore 
  <p> `${description}` <p>
}

如何在反应中添加多个条件？

How can I add multiple conditions in react?

javascript

button

show-hide

reactjs