使用字符串引用 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>
    );

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

Referencing a ReactJS object property using a string

javascript

properties

object

conditional-statements

reactjs

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

Referencing a ReactJS object property using a string

javascript

properties

object

conditional-statements

reactjs

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