jjzjj

babel-plugin-react-intl

全部标签

javascript - React 中的嵌套键属性要求

我理解在使用组件数组时,key属性被假定为数组的索引,并且应该明确设置。是否建议明确设置那些child的child?{arr.map(item,i)=>{} 最佳答案 KeyshelpReactidentifywhichitemshavechanged,areadded,orareremoved.Keysshouldbegiventotheelementsinsidethearraytogivetheelementsastableidentity(source)key的一般目的是优化React的渲染性能。如果你有一个项目列表,给一个

javascript - 在 react 中添加样式属性

在react中,有这个:return({variable?hello:world})如您所见,我正在执行一个三元运算符以根据变量输出内容。我想在p标签中添加style属性,如下所示:hello但它不起作用。我也试过:我做错了什么? 最佳答案 不是font-weight而是fontWeight,需要使用camelCase表示法RefThestyleattributeacceptsaJavaScriptobjectwithcamelCasedpropertiesratherthanaCSSstring.根据评论更新您的示例代码中存在逻辑

javascript - 使用 Babel CLI 提取器提取 Javascript gettext 消息

据说hereBabel可以提取Python和Javascript文件的gettext消息。Babelcomeswithafewbuiltinextractors:python(whichextractsmessagesfromPythonsourcefiles),javascript,andignore(whichextractsnothing).命令行提取器已记录here-但没有使用示例。也在samepointer上面提到了用于提取的配置文件,但没有太多展开。当我在包含js文件的目录上运行提取器的基本命令时,我只生成了.POheader,但没有消息。$pybabelextract/p

javascript - ReferenceError : Intl is not defined in Node. js

我正在尝试在Node.js中构造一个newIntl.Collat​​or()对象。有谁知道为什么Intl对象不会出现在Node运行时中?AccordingtoMDN,它被ECMAScript指定为命名空间,所以我不明白为什么它不在那里。 最佳答案 不幸的是,当前的node(截至0.10版,在撰写本文时)不支持ECMA-402Intl对象,除非您执行自定义的node编译,这在node.js中有记录Readme.Withlibicui18nsupport:svncheckout--force--revision214189\http:/

javascript - react .js : Why is there no componentDidRender event?

我刚开始使用React,有几次我在想:“为什么没有componentDidRender事件?”。假设我有一个将表格呈现给DOM的组件,我想使用bootstrap-sortable在此表上允许用户根据他想要的任何列进行排序。在bootstrap-sortable的情况下,您需要在绘制表格后运行$.boostrapSortable()以初始化插件。在我看来,React组件上有两个处理程序可以合理地考虑用于此目的:componentDidMount:这不起作用,因为DOM在执行的这个点似乎没有更新。componentDidUpdate:这可能有效,但不会在初始渲染时触发。我并不是说React

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 - 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 - 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 - 使用 Babel.js 将 ES6 箭头函数编译为 Es5

在Mozilla文档中查看ES6箭头函数的文档时,我了解到箭头函数应用严格模式的所有规则,除了在link中描述的规则。varf=()=>{'usestrict';returnthis};varg=function(){'usestrict';returnthis;}console.log(f());//printsWindowconsole.log(g());//printsundefined//wecantestthisinfirefox!但是,Babel.js将箭头函数代码转换为ES5代码,返回undefined而不是Window(demolink)"usestrict";setT