草庐IT

react-google-maps

全部标签

javascript - React.js app.js 文件大小

我创建了非常简单的React应用程序,其中包含7个页面和13个组件。我正在使用gulp来编译它,使用browserify来获取依赖项,所有文件都被最小化了。我构建的app.js文件有1.1MB。我认为它很大。我可以做些什么来减小它的大小?是否有任何好的做法来实现最小尺寸?编辑:我的没有依赖项的源代码是91KB。 最佳答案 使用webpack-uglify和禁用sourcemaps可以大大提高输出到合理的大小(helloworld应用程序大约140kbs)几个步骤:将webpack配置中的devtool设置为cheap-source-

javascript - 如何从 autocomplete.getPlace() 获取 google place api 结果

我想将来自googletheplacesapi的经度/纬度结果传递到我的MVC应用程序操作路由值。我不确定如何将它获取到我的路由值或如何将javascript返回到html值。现在varresult=autocomplete.getPlace();返回一个未定义的值。因此,即使地点的自动完成工作正常,它甚至看起来都无法正常工作。varinput=document.getElementById('location');varoptions={types:['(cities)'],componentRestrictions:{country:"us"}};varautocomplete=n

javascript - react .js : How do you change the position of a Component item

如何在React中更改组件项的位置?除非我误解了,否则React按key排序列表项,在DOM中用data-reactid表示,但我不知道如何修改页面组件的key即您如何获取组件,更改它的key,然后触发渲染,以便重新排序的列表按照您设置的顺序呈现?例如在下面的代码示例中,当单击Clickme链接时,第一个列表项将与最后一个列表项交换。理想情况下,此功能允许您动态重新排序/重新定位页面上的任何组件,而无需更改render方法中组件的顺序。这是完整项目所在的存储库的链接:https://github.com/bengrunfeld/gae-react-flux-todosvarTodoBo

javascript - 如何通过 jQuery 和 Ajax 将 Google 表单数据发布到电子表格

我正在开发一个Chrome扩展程序,它本质上是一个简单的自定义Google表单,它将发布到响应电子表格中。我获得了以下功能,仅成功发送和填充数据一次,但再也不会:functionpostFormToGoogle(){vartimeOne=$("#time1hour").val();vartimeTwo=$('#time2hour').val();vartimeThree=$('#time3hour').val();$.ajax({url:"https://docs.google.com/forms/d/FORMKEY/formResponse",beforeSend:function(

javascript - react .js : modify render() method for all components?

出于调试原因,我想将以下行添加到通用render()方法中,以便它在所有组件中执行。console.log('render'+this.constructor.displayName,this.state); 最佳答案 我假设您想在不更改任何现有代码的情况下执行此操作。我尝试了这个并找到了一种方法,如果您正在使用类似webpack或browserify的东西来构建您的应用程序并且您正在使用Reactv0.13。重要的是要注意,它使用私有(private)方法,进入React的内部,并且可能随时中断。也就是说,它可能对您的调试目的有用

javascript - react onClick 不触发

以下代码无效。onClick事件从未触发,但我在browserify或控制台中没有看到任何错误。varReact=require('react');varButton=React.createClass({render:function(){return(LeftRightMiddle);}});module.exports=Button;我使用alert只是为了测试小型CSS。为什么不触发onclick? 最佳答案 您的示例中有错字。使用“onClick”而不是“onclick”。Left有关工作示例,请参阅jsfiddle-ht

javascript - 更改 Google Places 自动完成结果框的位置

在我正在处理的页面上,GooglePlacesAutocomplete的结果显示在它应该显示的位置下方70像素处,在搜索框和结果容器的开头之间留下了一个空隙。间隙的高度恰好是Chrome自动填充功能的确切高度,所以我怀疑自动完成库出于某种原因在计算位置时考虑了该高度,即使我已经设法禁用我的搜索框上的那个功能。我可以通过覆盖.pac-container类的top属性的值来解决这个问题(替换1234px,API已使用1164px计算),但我宁愿有一种动态或仅基于偏移量来执行此操作的方法,而不是必须对该数字进行硬编码。有没有办法使用CSS或JavaScript/jQuery将自动完成结果容器

javascript - cljs Om 与 React 组件互操作?

是否可以在Om应用程序中使用第三方React组件?我有一个用ClojureScript和Om编写的项目,我想使用JedWatson/react-select,我该如何解决这个问题? 最佳答案 这有几个步骤:打包用于Clojurescript的JS库JS库是作为foreign-libraries的包,您可以阅读更多相关信息intheClojureScriptwiki.在您需要外部库后,您可以通过全局命名空间(js/)访问它并调用您的库定义的函数。这是一个exampleofusingfixed-data-tablewithOm.它的打包

javascript - 我如何根据 React 中的 javascript 对象渲染组件 X 次?

我正在尝试渲染X数量的照片,具体取决于OBJECT(photos)的长度。我试过将数据附加到字符串,但它不起作用。有什么好的解决办法吗?varRenderPhotos=React.createClass({getInitialState:function(){return{photos:this.props.photos};},render:function(){varphotoHolder="";for(vari=0;i"{this.props.photos[0].description}"");}return({photoHolder}////{this.props.photos[

javascript - 测试 React Modal 组件

抱歉,我一直在尝试通过单击按钮来测试关闭我的ReactModal,这让我度过了最艰难的时光。Modal尽可能简单,我已经尝试了所有我能想到或找到的方法,但我仍然无法查询它的子项。模态组件:varReact=require('react');varModal=require('react-bootstrap').Modal;varButton=require('react-bootstrap').Button;varMyModal=React.createClass({...render:function(){return(MyModalHello,World!Close);}});我的