reactjs - 与 ts 反应 - 检查地图 view.tsx 中的道具是否为空

Question

道具——

interface Props {
  readonly historicPrices: IHistoricPrices[] | null;
  readonly historicPricesChangeHandler: (value: IHistoricPrices[] | null) => void;
}

view.tsx 代码 -

          <div className={classes['innerContainer']}>
            {props.historicPrices?.map((price, idx) => {
              return (
                <li className={classes['innerContainer__text']} key={idx}>
                  {t(`historicPrices.currency.${currency}`)}
                  {price.price}
                  {t('historicPrices.date')}
                  {price.createdAt}
                </li>
              )
            })}
          </div>

如果数组没有返回任何内容，我如何显示消息

标签： reactjs

Answer 1

使用&&. 使用&&运算符，第二个表达式仅在第一个为真时运行。

     {props.historicPrices.length === 0 && <p>Alert</p> }

如果您有条件地想要显示一个或另一个，您可以使用?条件运算符：

     {props.historicPrices.length === 0 ? <p>Alert</p> : props.historicPrices?.map((price, idx) => {
              return (
                <li className={classes['innerContainer__text']} key={idx}>
                  {t(`historicPrices.currency.${currency}`)}
                  {price.price}
                  {t('historicPrices.date')}
                  {price.createdAt}
                </li>
              )
            })}

上面的代码<p>在长度为 0 时返回 ，否则运行 map 函数并将其渲染。