作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 react.js。我必须在我的联系我们页面上显示 map ,所以我添加了从谷歌地图获得的 iframe 嵌入代码。我正在使用下面的代码。我没有使用任何 API。
import React from 'react';
const AddressMap=()=>{
return(
<div className="google-map-code">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15282225.79979123!2d73.7250245393691!3d20.750301298393563!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30635ff06b92b791%3A0xd78c4fa1854213a6!2sIndia!5e0!3m2!1sen!2sin!4v1587818542745!5m2!1sen!2sin" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
);
}
export{AddressMap}
我的页面出现错误
Error: The
style
prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
你能帮我解决这个问题吗?
最佳答案
在 React 风格中需要一个对象。例如:style={{border:0}}
import React from 'react';
const AddressMap=()=>{
return (
<div className="google-map-code">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15282225.79979123!2d73.7250245393691!3d20.750301298393563!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30635ff06b92b791%3A0xd78c4fa1854213a6!2sIndia!5e0!3m2!1sen!2sin!4v1587818542745!5m2!1sen!2sin" width="600" height="450" frameborder="0" style={{border:0}} allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
);
}
export{AddressMap}
关于reactjs - 如何在 react.js 中使用 google map iframe 嵌入代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61425949/
我是一名优秀的程序员,十分优秀!