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

Question

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

但是，我有这些组件的整个文件夹，我想对它们进行索引，以便它们可以有条件地传递给子组件。像这样思考:需要提供一份加密货币列表。每张卡片都会采用一个 Logo (.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/>,
};