Question

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

但是，我有这些组件的整个文件夹，我想索引它们，以便它们可以有条件地传递给子组件。这样想：需要提供加密货币清单。每张卡片都会以徽标（.tsx组件形式的SVG）作为道具。这将如何运作？

示例，index.ts：

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

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

在a中，让我们说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/>,
};

是否可以创建React-native组件的索引并将其作为prop进行有条件的传递？

1 个答案: