Question

我正在尝试根据一些可变数据访问URL。

{
  this.state.countries.map((country, key) => {
    return <a key={country.iso2}>
      <img src="https://www.countryflags.io/{country.iso2}/shiny/24.png" />
    </a>;
  });
}

上述URL中的值 {country.iso2} 是动态的。请帮助我正确设置网址格式。

Answer 1

尝试Template literals。注意使用back tick和$

<img src=`https://www.countryflags.io/${country.iso2}/shiny/24.png`/>

Answer 2

使用jsx时，必须添加花括号，然后添加模板文字，然后添加${}包围的变量，如下所示：

let country = { iso2: "au" };
ReactDOM.render(
  <img src={`https://www.countryflags.io/${country.iso2}/shiny/24.png`} />,
  root
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 3

您可以像

{this.state.countries.map((country, key) => {
       return
           <a key={country.iso2}>
               <img src=`https://www.countryflags.io/${country.iso2}/shiny/24.png`/>
                                </a>
 })}

Answer 4

使用反引号和美元符号

{this.state.countries.map((country, key) => {
                            return
                                <a key={country.iso2}>
                                <img src=`https://www.countryflags.io/${country.iso2}/shiny/24.png`/>
                                </a>
 })}

Answer 5

正确的做法是使用Template literals

如果您的值是动态的，则使用back tick和$

如何在URL中传递变量值？

5 个答案: