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

如何解决使用字符串引用ReactJS对象属性

我正在尝试在React Component上使用字符串引用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>
  );

解决方法

感谢@ 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>
    );