草庐IT

react-css-modules

全部标签

javascript - 有没有办法遍历 React 构建的树?

我需要为HTML页面构建一个可视化编辑器。ReactJS似乎是一个不错的选择。目前我面临以下问题:我对我的数据建模:varModel={title:'Hello',description:'Pellentesqueeleifendurnaacpurustempus...',date:newDate().toString()};并构建了将其数据存储在上述结构中的组件:varApp=React.createClass({getInitialState:function(){return{value:Model}},handleMouseEnter:function(event){$(eve

javascript - Grunt-injector 忽略来自 bower 依赖的 css 文件

我在新项目中使用grunt-injector。它设置为将所有Bower依赖项添加到index.html文件。我的依赖项中有ionic,我只将它用于javascript文件而不是css。所以我希望grunt-injector不要在我的项目中添加ioniccss文件。这是我的配置:injector:{options:{addRootSlash:false,ignorePath:'app/',bowerPrefix:'bower',},bowerDependencies:{files:{'app/index.html':['bower.json'],}}我可以通过修改ionic/bower.

javascript - 如何将 CSS 添加到我的 `mailchimp` 弹出表单?

我正在使用mailchimps弹出式订阅表单。我尽可能地设计了mailchimp中的内容。我想在弹出窗口中添加更多CSS,我已尝试将CSS添加到已加载到我网站中的CSS工作表,但即使使用!important等,表单也不会在弹出窗口中选取它。mailchimp的代码是:require(["mojo/signup-forms/Loader"],function(L){L.start({"baseUrl":"mc.us8.list-manage.com","uuid":"731f7bb19522a201007a53699","lid":"138afe0d12"})})现在,我也尝试在我的页面

javascript - react 大数据 block 的非阻塞渲染

最近我开始学习react,想知道是否有某种模式可以用于大数据的非阻塞UI线程渲染。比方说,我们取thisexample:,点击创建很多项目,设置数量,比方说10000,我们将获得卡住的UI将近10秒。它使用可观察对象平滑地更新,一旦完成渲染,我明白了,但是有没有办法以block的形式平滑地渲染它?通常,您会设置某种数组,将其切片,比方说50,处理这些数组并将setTimeout设置为0以切片另一个50,依此类推。重复直到数组的长度为0。是否有反应组件的模式来做到这一点?也许一些插件或直到mixin? 最佳答案 您可以使用reques

javascript - React.js 事件需要点击 2 次才能执行

我正在通过React.js构建生命游戏,但我陷入了一种不舒服的境地:我设置为onClick={event}的每个事件都需要2次点击才能执行。让我描述更多:正如您在下面的代码中看到的,我有2个按钮(一个按钮用于将板的大小更改为10x10,另一个按钮用于更改间隔的速度)。一切正常,只是我点击这两个按钮时,需要双击执行。在第一次点击时,使用Chrome中的ReactDeveloperTool,我可以看到包括width,height,speed在内的状态发生了变化,但是状态board仍然保持不变。只有在第二次点击后,board状态才会改变。谁能解释原因并告诉我如何解决?谢谢这是我的部分代码va

javascript - angular 2 相当于 react renderToString

我正在寻找与react-dom/server.renderToString等效的Angular2import{renderToString}from'react-dom/server';//Renderthecomponenttoastringconsthtml=renderToString();使用NodeJs将指令/组件转换为HTML的最简单代码示例是什么?我猜这些包之一应该是可能的:@angular/compiler-v2.0.0-rc.2@angular/platform-server-v2.0.0-rc.2 最佳答案 An

javascript - Prop 更改后 react 组件不会重新渲染

每当用户单击我的组件上的按钮时,我都会尝试过滤状态中的一组对象。过滤的逻辑工作正常,但是当它返回到组件时,过滤的对象丢失了,而是属性未定义。我是否缺少生命周期方法?点击事件:MyPosts...{this.renderPosts()}过滤我的帖子filterMyPosts(){this.props.updateFilter("myPosts");//filteringfunctionusesswitchstatementbasedonstringstofilterposts}组件容器:constmapStateToProps=(state)=>{return{currentUser:s

javascript - 使用来自 Typescript 的 react-meteor-data

问题:我如何在Typescript中使用react-meteor-data?背景:我刚开始一个新项目,想使用Meteor。根据我一直在阅读的内容(link),建议似乎是将React与Meteor一起用于新项目。太好了,无论如何我都想学习React。因为我是一名Java程序员,所以我非常喜欢使用Typescript。但是我在这三项技术上遇到了很多麻烦。具体来说,我如何将React组件连接到meteor容器?我相信我应该使用react-meteor-data但如果我运行typingssearchmeteoraddreact-meteor-data我一无所获。我从这里去哪里?额外学分:我真正

javascript - 在 React 组件中将 SVG 字符串转换为图像

我在React组件中有一个动态生成的SVG字符串。我想将其作为图像嵌入到组件中。目前,我正在使用以下内容:classSomeComponentextendsReact.Component{render(){varimage='';return()}}但是使用名为dangerouslySetInnerHTML的属性让我很不安。是否有更普遍接受(和更安全)的方法来做到这一点? 最佳答案 由于SVG是动态生成的,您不能将其存储为Assets,作​​为dangerouslySetInnerHTML的替代方案,您可以简单地将其设置为DataU

javascript - Angular 翻译 : Child Module translatePartialLoader urlTemplate overrides the Parent Module translatePartialLoader urlTemplate

我必须使用多个具有不同urlTemnplate的translatePartialLoader。我正在使用angular-translate-loader-pluggable。看起来子模块urltemplate覆盖了父模块urltemplate父模块配置$translateProvider.useLoader('$translatePartialLoader',{urlTemplate:__env.hostUrl+'/*****/****/localization/resource_bundle?bundle_name={part}&locale={lang}'});$translate