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

Question

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

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

流-显示按钮->单击时->显示 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>
}