Question

我有一个清单：

var coins =["BTC", "ETH","LTC"]

还有react library我可以使用以下架构获取这些硬币的图标：

<Icon.Eth /> or <Icon.Btc /> or <Icon.ltc />

但是使用API检索列表，它可以随时更改。有没有办法做这样的事情：

<Icon.coins[0] /> or <Icon.coins[1] /> or <Icon.coins[2] />

Answer 1

使用这样的方括号

let IconA = Icon[coins[0]];
let IconB = Icon[coins[1]];

// Then use them like this
<IconA /> or <IconB />

Answer 2

如果您想根据硬币名称动态查找，可以导入所有硬币并按字符串查找。

import * as Icons from 'react-cryptocoins';

const coins = ['Eth'];

class MyClass extends React.Component {
    render() {
        return (
            <div>
                { React.createElement(Icons[coins[0]]) }
            </div>
        );
    }
}

请注意，这需要您的数组是标题，而不是所有大写。把它们放在一起，我会为此做一个组件：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import * as Icons from 'react-cryptocoins'

const Coin = ({ icon }) => (
    React.createElement(Icons[coins[0]]) }
);

Coin.propTypes = {
    icon: PropTypes.string.isRequired
};

export default Coin;

用法：

import React, { Component } from 'react';
import Coin from './Coin';

const coins = ["BTC", "ETH", "LTC"];

function capitalize(str) {
    return str.charAt(0).toUpperCase() + str.substr(1).toLowerCase();
}

class MyElement extends Component {
    render() {
        return (
            <div>
                { coins.map( coin => (
                    <Coin icon={capitalize(coin)} />
                )}
            </div>
        )
    }
}

使用列表从库中获取react组件

2 个答案: