小编Eun*_*orn的帖子

在React组件中使用Google Map

我试图在React Component中使用Google Map,但它似乎不起作用.我目前指的是https://developers.google.com/maps/documentation/javascript/adding-a-google-map

这是我的组件代码:

class ContactBody extends React.Component {
  componentWillMount() {
    const script = document.createElement("script");
    const API = 'AIzaSyDbAz1XXxDoKSU2nZXec89rcHPxgkvVoiw';
    script.src = `https://maps.googleapis.com/maps/api/js?key=${API}&callback=initMap`;
    script.async = true;

    document.body.appendChild(script);
  };

  initMap() {
    const uluru = {lat: -25.363, lng: 131.044};
    const map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: uluru
    });
    const marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }

  render() {
    
    this.initMap();
    
    return (
      <div>
        <h1>Contact</h1>
        <div id="map" style={{width: 400, height: 300}}></div>
      </div>
    )
  }
}

ReactDOM.render(
  <ContactBody />,
  document.getElementById('react') …

Run Code Online (Sandbox Code Playgroud)

javascript google-maps google-maps-markers reactjs redux

Eun*_*orn

2018 02-03

9
推荐指数

3
解决办法

7169
查看次数

Google 标签管理器：跟踪“选择”下拉菜单“选项”标签值

我无法跟踪“select”标签中“option”标签的值。我目前有一个 Google Translator Widget 的下拉菜单，用户可以点击它并选择语言。当您单击“选择语言”下拉菜单时，您将能够看到德语作为选项。请参阅随附的屏幕截图。我在 Google 标签管理器中创建了一个宏调用“JS - Google 翻译 - 选择选项”。

这是“JS - Google 翻译 - 选择选项”的代码：

function() {
  var list = document.querySelector('select.goog-te-combo');
  return list ? list.options[list.selectedIndex].value : undefined;
}

Run Code Online (Sandbox Code Playgroud)

上面的代码将找到下拉菜单，其中“goog-te-combo”作为“select”标签的类名。然后，它会查看选择标签中的选项标签是否可用，并获取所选选项标签的值。

我还创建了一个标签调用“GA - 事件 - 谷歌翻译点击”并触发调用“点击 - 谷歌翻译”。

当我对此进行测试时，我看到当我点击页面上的下拉菜单时，我的“GA - 事件 - 谷歌翻译点击”被触发。但是，当我检查 Google 标签管理器中的“变量”选项卡并检查变量“JS - Google 翻译 - 选择选项”时，我看到它是空的。

Google 翻译小工具下拉菜单选项

谷歌标签管理器“JS - 谷歌翻译 - 选择选项”为空

javascript google-analytics event-handling dom-events google-tag-manager

Eun*_*orn

2019 09-14

5
推荐指数

1
解决办法

8202
查看次数

React Native：如何在组件中添加脚本标签

我正在尝试在 React Native 应用程序的组件内添加标签。下面是我的代码，它似乎不起作用。谁能告诉我如何解决这个问题？

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Dimensions from 'Dimensions';
import {StyleSheet, View, TextInput, Image, Text} from 'react-native';

export default class Chatbot extends Component {
  render() {
    return (
      <View>
        <Text>Testing</Text>
        
		<script type="text/javascript">
		    window.__be = window.__be || {};
		    window.__be.id = "5b3a47b4b30a36000769d821";
		    (function() {
		        var be = document.createElement('script'); be.type = 'text/javascript'; be.async = true;
		        be.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.botengine.ai/widget/plugin.js';
		        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(be, s);
		    })();
		</script>

      </View> …

Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-native react-redux

Eun*_*orn

lucky-day

5
推荐指数

1
解决办法

1万
查看次数

React.js - 如何在另一个方法完全执行后调用一个方法

我有两个简单的功能。单击按钮后，我试图在“handleSearchClick”函数中调用两个函数。

我想在“this.props.fetchNewsApiOrg(this.newsSourceName)”完全执行后运行“this.props.getNewsDesc()”。

这是代码：

handleSearchClick = () => {
    this.props.fetchNewsApiOrg(this.newsSourceName);
    
    this.props.getNewsDesc();
  }

Run Code Online (Sandbox Code Playgroud)

你能告诉我在另一个函数完全执行后调用一个函数的正确方法吗？

谢谢你。

javascript node.js reactjs redux react-redux

Eun*_*orn

lucky-day

4
推荐指数

1
解决办法

1万
查看次数

反应路由器链接不起作用

React router Link 似乎不适用于我的应用程序。似乎我失踪了，因为基本不起作用。我的链接组件将 URL 更新为 /products/singleproduct 但我的页面刚刚中断....谁能告诉我如何解决这个问题？

应用程序.js

import React from 'react';
import Header from './Header';
import Body from './Body';
import Main from './Main';
require('../../scss/style.scss');

const App = () => (
    <div>
    	<Header />
    	<Main />
    </div>
);

export default App;

Run Code Online (Sandbox Code Playgroud)

主程序

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import ServicePage from './ServicePage';
import ProductPage from './ProductPage';
import SingleProductPage from './SingleProductPage';
import Body from './Body';

export default class Main extends Component { …

Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-router redux react-redux

Eun*_*orn

2018 02-04

3
推荐指数

1
解决办法

2万
查看次数

反应路由器链接右键单击不起作用

我在使用 React Router Link 标签创建的链接上“右键单击”时遇到问题。我希望能够右键单击这些链接并选择“在新标签中打开链接”选项。有人可以帮我解决这个问题吗？

这是我的代码：

redirectUrl = (e) => {
    let url = e.currentTarget.getAttribute("dataattrurl");
    browserHistory.push({
      pathname    : url,
      query       : '',
      state       : {}
    });
  }
  
  const listItems = readingHistory.map((item, index) => {
      return (
        <li key={index} role="listitem">
          <Link className="linkPointer" onClick={this.redirectUrl} dataattrurl={`/document/${item.resId}`} onContextMenu={this.contextMenu}>
            {item.title}
          </Link>
        </li>
      );
    });

Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-router redux react-redux

Eun*_*orn

lucky-day

2
推荐指数

1
解决办法

2431
查看次数