Question

React很新，我有这个问题：我想从coinData获取URL + ImageUrl。

在Vue中，我只想在组件中创建一个方法：

getCoinImage: function(symbol) {
  return CRYPTOCOMPARE_API_URI + this.coinData[symbol].ImageUrl;
}

然后在视图模板中调用该函数，它将返回我正在寻找的图像的完整URL。

我如何在React中执行此操作？

class App extends Component {

  constructor(props) {
    super(props);

this.state = {
  cryptos: [],
  coinData: {},
};
}

componentDidMount() {
 axios.get('https://api.coinmarketcap.com/v1/ticker/?limit=0')
.then(res => {
  const cryptos = res.data;
  this.setState({cryptos: cryptos});
  console.log(this.state.cryptos);

})


axios.get('https://min-api.cryptocompare.com/data/all/coinlist')
.then(res => {
const coinData = res.data.Data;
this.setState({coinData: coinData});
//console.log(coinData["BTC"].ImageUrl);
})
}

render() {
return (

    <table className="table is-striped is-narrow is-fullwidth"><thead>
        <tr>
          <td>Rank</td>
          <td>Name</td>
          <td>Symbol</td>
          <td>Price (USD)</td>
          <td>1h</td>
          <td>24h</td>
          <td>1 Week</td>
          <td>Market Cap</td>
        </tr>
      </thead>
      <tbody>{Object.keys(this.state.cryptos).map((key) => (
        <tr>
          <td>{this.state.cryptos[key].rank}</td>
          <td>{this.state.cryptos[key].name}</td>
          <td>{this.state.cryptos[key].symbol}</td>
          <td>{this.state.cryptos[key].price_usd}</td>
          <td>{this.state.cryptos[key].percent_change_1h}</td>
          <td>{this.state.cryptos[key].percent_change_24h}</td>
          <td>{this.state.cryptos[key].percent_change_7d}</td>
          <td>{this.state.cryptos[key].market_cap_usd}</td>
        </tr>
 ))};
      </tbody>
    </table>

);
}
}

Answer 1

您可以在组件内部编写类似的函数，并在需要时调用它，如

getCoinImage(imageUrl) {
 return `${CRYPTOCOMPARE_API_URI}${imageUrl}`;
}

只需像任何其他方法（如render）一样编写此代码。然后在您需要的地方，您需要像this.getCoinImage(this.coinData[symbol].ImageUrl)一样调用它。我假设您将在变量CRYPTOCOMPARE_API_URI中获得所需的数据。

假设你在地图中需要它，你可以像这样打电话

<td><img src={this.getCoinImage(this.state.cryptos[key].imageUrl)} /></td>

Answer 2

首先，我只会在两个请求完成后更新状态

async componentDidMount() {
  const res1 = await axios.get('https://api.coinmarketcap.com/v1/ticker/?limit=0');
  const res2 = await axios.get('https://min-api.cryptocompare.com/data/all/coinlist');

  this.setState({
    cryptos: res1.data,
    coinData: res2.data.Data
  });
}

现在，您可以访问在渲染功能中渲染图像所需的一切。（为了清楚起见，我省略了一些属性）

render() {
  const {cryptos, coinData} = this.state;

  return (

    <table className="table is-striped is-narrow is-fullwidth">
      <thead>
      <tr>
        <td>Symbol</td>
        <td>Image</td>
      </tr>
      </thead>
      <tbody>
      {Object.keys(this.state.cryptos).map((key) => (
        <tr>
          <td>{cryptos[key].symbol}</td>
          <td>{_.get(coinData, `[${cryptos[key].symbol}].ImageUrl`, `Not Found: ${cryptos[key].symbol}`)}</td>
          <td><img src={CRYPTOCOMPARE_API_URI + _.get(coinData, `[${cryptos[key].symbol}].ImageUrl`, '/default.png')} /></td>
        </tr>
      ))};
      </tbody>
    </table>
  );
}

Answer 3

即使在React中，您也可以在组件中使用方法。只需在组件中创建一个名为getCoinImage的方法。然后从外部保留对组件的引用，最后以这种方式调用它：

this.refs.myComponentReference.getCoinImage();

组件内部的功能 - ReactJS

3 个答案: