javascript - 是否可以制作 React-native 组件的索引并将它们作为 prop 有条件地传递？

Question

在 React-native 中，svg 是一团糟。我通过使用 msvgc 将 SVG 转换为 .tsx 组件解决了这个问题，然后将其导出。它有效。

但是，我有一个包含这些组件的完整文件夹，我想为它们编制索引，以便可以有条件地将它们传递给子组件。这样想:需要提供一份加密货币列表。每张卡片都会有一个标志(.tsx 组件形式的 SVG)作为 Prop 。这将如何运作？

示例，index.ts:

import BTCLogo from './Bitcoin'
import ETHLogo from './Ethereum'
import DogeLogo from './Doge'

export const cryptoLogos = {
    Doge: DogeLogo,
    BTC: BTCLogo,
    ETH: ETHLogo,
};

比方说，在 CryptoContainer 中，我如何才能将它们传递给子组件？

import * as logos from './cryptologos'

// I can access them as logos.cryptoLogos but I get the error `Warning: Functions are not valid as a React child.`?

Answer 1

想通了。索引时，您需要将 SVG 包装为 JSX 组件。

export const cryptoLogos = {
    'Doge': <DogeLogo/>,
    'BTC': <BTCLogo/>,
    'ETH': <ETHLogo/>,
};