Question

我有一个看起来像这样的组件（本文已简化）：

const CoinSymbol = ({ classes, symbol }) => (
  <i className={[symbol, 'cc'].join(' ')} />
)

'cc'+符号将创建一个有效的类名，库将使用该类名来返回Webfont图标。

我正在这样的map（）函数上调用它：

<CoinSymbol symbol={coin.symbol} />

确实显示了很多符号，但是库中不存在一些符号。 React将元素渲染为DOM，但是显然不是在页面上显示任何内容，因为它不是有效的className。

我想解决丢失的图标的问题，但是对于如何处理它并不太确定。我当前的计划是渲染（？）图标来代替缺少的图标。

处理这种情况的好方法是什么？

Answer 1

这比JS问题更多的是CSS问题，因此最好查看用于渲染的CSS。

但是，通常，一种通用方法是定义一个默认图标，该图标会为您的图标组件 all 全部加载，但是如果该符号确实存在，它将覆盖默认设置。

/* Default / fallback */
i.cc {
  background: url("/icons/coins/unknown.png");
}

/* Valid symbols override the default */
i.cc.eth {
  background: url("/icons/coins/eth.png");
}

处理不返回任何内容的条件类名

1 个答案: