Как передать значения переменных в 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>;
  });
}

Значение {country.iso2} в приведенном выше URL-адресе равно Dynami c. Пожалуйста, помогите мне правильно отформатировать URL.

Answer 1

Попробуйте Шаблонные литералы . Обратите внимание на использование 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

Правильным способом является использование литералов шаблона

Если ваше значение равно Dynami c, тогда используйте 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>
 })}