如何在react.js中使用谷歌地图iframe嵌入代码

Question

我正在使用react.js。我必须在“联系我们”页面上显示地图，因此我添加了从 google 地图获得的 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}

我的页面上出现错误

错误：该styleprop 需要从样式属性到值的映射，而不是字符串。例如，使用 JSX 时，style={{marginRight:spacing + 'em'}}。

你能帮我解决这个问题吗？

Answer 1

在反应风格中需要一个对象。例如：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"
            />
        </div>
    );
};
export { AddressMap };