我正在尝试根据一些可变数据访问 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 格式。
5 回答
繁花如伊
TA贡献2012条经验 获得超12个赞
尝试模板文字。back tick注意and的使用$
<img src=`https://www.countryflags.io/${country.iso2}/shiny/24.png`/>
HUX布斯
TA贡献1876条经验 获得超6个赞
当您使用 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>
慕田峪9158850
TA贡献1794条经验 获得超7个赞
你可以这样做
{this.state.countries.map((country, key) => {
return
<a key={country.iso2}>
<img src=`https://www.countryflags.io/${country.iso2}/shiny/24.png`/>
</a>
})}
摇曳的蔷薇
TA贡献1793条经验 获得超6个赞
使用反引号和美元符号
{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 关注
- 87 浏览
添加回答
举报
0/150
提交
取消