如何在 URL 中传递变量值？

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}是动态的。请帮我正确设置 URL 格式。

Answer 1

尝试模板文字。back tick注意and的使用$

<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

正确的做法是使用模板文字

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

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

使用反引号和美元符号

{this.state.countries.map((country, key) => {

                            return

                                <a key={country.iso2}>

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

                                </a>

 })}