我正在嘗試根據(jù)一些可變數(shù)據(jù)訪問 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}是動(dòng)態(tài)的。請(qǐng)幫我正確設(shè)置 URL 格式。
5 回答
繁花如伊
TA貢獻(xiàn)2012條經(jīng)驗(yàn) 獲得超12個(gè)贊
嘗試模板文字。back tick注意and的使用$
<img?src=`https://www.countryflags.io/${country.iso2}/shiny/24.png`/>
HUX布斯
TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超6個(gè)贊
當(dāng)您使用 jsx 時(shí)，您必須添加花括號(hào)，然后添加模板文字，然后添加由 包圍的變量${}，如下所示：
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>
慕田峪9158850
TA貢獻(xiàn)1794條經(jīng)驗(yàn) 獲得超8個(gè)贊
你可以這樣做
{this.state.countries.map((country, key) => {
return
<a key={country.iso2}>
<img src=`https://www.countryflags.io/${country.iso2}/shiny/24.png`/>
</a>
})}
搖曳的薔薇
TA貢獻(xiàn)1793條經(jīng)驗(yàn) 獲得超6個(gè)贊
使用反引號(hào)和美元符號(hào)
{this.state.countries.map((country, key) => {
return
<a key={country.iso2}>
<img src=`https://www.countryflags.io/${country.iso2}/shiny/24.png`/>
</a>
})}
- 5 回答
- 0 關(guān)注
- 223 瀏覽
添加回答
舉報(bào)
0/150
提交
取消