История

В настоящее время я создаю собственный сайт агентства по разработке программного обеспечения , мой опыт не в области Frontend-разработки, а больше в Backend, Infra и Data. У меня ограниченный опыт работы с React, мой опыт в этой области в основном связан с инструментами сборки, такими как Webpack и оптимизация внешнего интерфейса. И теперь, когда я пытаюсь включить iframe Google Maps, у меня возникли трудности.

Из Google Maps я получаю что-то вроде этого:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.521260322283!2d106.8195613507864!3d-6.194741395493371!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f5390917b759%3A0x6b45e67356080477!2sPT%20Kulkul%20Teknologi%20Internasional!5e0!3m2!1sen!2sid!4v1601138221085!5m2!1sen!2sid" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

Если я попытаюсь сделать это красиво, это будет выглядеть так:

            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.521260322283!2d106.8195613507864!3d-6.194741395493371!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f5390917b759%3A0x6b45e67356080477!2sPT%20Kulkul%20Teknologi%20Internasional!5e0!3m2!1sen!2sid!4v1601138221085!5m2!1sen!2sid"
              width="600"
              height="450"
              frameBorder="0"
              style="border:0;"
              allowFullScreen=""
              aria-hidden="false"
              tabIndex="0"
            />

Но из коробки ничего не выходит, оказалось, проблема в style.

Она должна быть style={{ border: 0 }}, а не style="border:0;". Теперь конечный результат выглядит так:

            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.521260322283!2d106.8195613507864!3d-6.194741395493371!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f5390917b759%3A0x6b45e67356080477!2sPT%20Kulkul%20Teknologi%20Internasional!5e0!3m2!1sen!2sid!4v1601138221085!5m2!1sen!2sid"
              width="600"
              height="450"
              frameBorder="0"
              style={{ border: 0 }}
              allowFullScreen=""
              aria-hidden="false"
              tabIndex="0"
            />

Вы можете настроить width и height по мере необходимости.

И вот как это все сработало: