使用字符串引用ReactJS对象属性

Question

我正在尝试使用React组件上的字符串引用JS对象属性，以便删除重复的条件语句。这是我当前的渲染函数：

render() {
const { USD, GBP, EUR } = this.props.bpi;
const { currency } = this.state;
console.log(currency);
let list = '';
if (this.state.currency === currency) {
list = (
<li className='list-group-item'>
Bitcoin rate for {USD.description}:{' '}
<span className='badge badge-primary'>{USD.code}</span>{' '}
<strong>{USD.rate}</strong>
</li>
);
} else if (this.state.currency === 'GBP') {
list = (
<li className='list-group-item'>
Bitcoin rate for {GBP.description}:{' '}
<span className='badge badge-primary'>{GBP.code}</span>{' '}
<strong>{GBP.rate}</strong>
</li>
);
} else if (this.state.currency === 'EUR') {
list = (
<li className='list-group-item'>
Bitcoin rate for {EUR.description}:{' '}
<span className='badge badge-primary'>{EUR.code}</span>{' '}
<strong>{EUR.rate}</strong>
</li>
);
}
return (
<div>
<select
onChange={(e) => this.setState({ currency: e.target.value })}
className='form-control'
>
<option value='USD'>USD</option>
<option value='GBP'>GBP</option>
<option value='EUR'>EUR</option>
</select>
<br />
<ul className='list-group'>{list}</ul>
</div>
);
}

请注意，在上面的代码中，我重复了该列表3次，以查找并设置正确的对象属性。比方说我有这个"；货币；对象：

const currency = {
USD: {
description: "This is USD",
code: "USD",
rate: "5.6",
},
GBP: {
description: "This is GBP",
code: "GBP",
rate: "6",
},
EUR: {
description: "This is EUR",
code: "EUR",
rate: "8",
}
}

如何将我的货币状态中的字符串设置为对象的属性值，这样我就可以声明一个列表而不需要重复的条件？我想要实现的是代码的这一部分：

if (this.state.currency === currency) {
list = (
<li className='list-group-item'>
Bitcoin rate for {USD.description}:{' '}
<span className='badge badge-primary'>{USD.code}</span>{' '}
<strong>{USD.rate}</strong>
</li>
);
} else if (this.state.currency === 'GBP') {
list = (
<li className='list-group-item'>
Bitcoin rate for {GBP.description}:{' '}
<span className='badge badge-primary'>{GBP.code}</span>{' '}
<strong>{GBP.rate}</strong>
</li>
);
} else if (this.state.currency === 'EUR') {
list = (
<li className='list-group-item'>
Bitcoin rate for {EUR.description}:{' '}
<span className='badge badge-primary'>{EUR.code}</span>{' '}
<strong>{EUR.rate}</strong>
</li>
);
}

然后把它转换成这样的东西(也许我真的不知道(：

list = (
<li className='list-group-item'>
Bitcoin rate for {currency.description}:{' '}
<span className='badge badge-primary'>{currency.code}</span>{' '}
<strong>{currency.rate}</strong>
</li>
);

Answer 1

感谢@David784实现将其作为单个对象进行调用。这是我的最终渲染方法：

render() {
const CUR = this.props.bpi[this.state.currency];
let list = (
<li className='list-group-item'>
Bitcoin rate for {CUR.description}:{' '}
<span className='badge badge-primary'>{CUR.code}</span>{' '}
<strong>{CUR.rate}</strong>
</li>
);
return (
<div>
<select
onChange={(e) => this.setState({ currency: e.target.value })}
className='form-control'
>
<option value='USD'>USD</option>
<option value='GBP'>GBP</option>
<option value='EUR'>EUR</option>
</select>
<br />
<ul className='list-group'>{list}</ul>
</div>
);
}

以此作为重点

const CUR = this.props.bpi[this.state.currency];
let list = (
<li className='list-group-item'>
Bitcoin rate for {CUR.description}:{' '}
<span className='badge badge-primary'>{CUR.code}</span>{' '}
<strong>{CUR.rate}</strong>
</li>
);