草庐IT

react的refs属性

全部标签

javascript - 如何在 React 中实现搜索栏按钮和结果组件

我已经看到了其他类似的答案,但由于我是初学者,所以我尝试实现它们,但我很困惑,以至于对我没有任何帮助。这是问题所在:我有一个搜索栏(搜索栏组件),它应该有一个提交按钮。单击该按钮时,搜索结果应该出现在查看器组件中。我不知道如何从查看器中的搜索栏连接事件。如何告诉一个组件另一个组件发生了变化?我希望两个sibling能够传达这一点importReactfrom'react';varSearchbar=React.createClass({getInitialState:function(){return{};},handleSubmit:function(e){e.preventDefa

javascript - 通过在 react-router 的地址栏中输入它的地址直接访问路由器

有两种“主要”方式使用react-router(V4);第一种方法是使用哈希路由器,您可以通过在浏览器的地址栏中键入地址来直接访问该地址,但您必须在URL中添加#,另一种方法是使用BrowserRouter,它具有漂亮且用户友好的URL结构,但您不能t直接键入地址以呈现路线。如何将HashRouter配置为在没有#的情况下工作,或者将BrowserRouter配置为直接输入URL?.htaccess可以吗?怎么办?constReact=require('react');constReactDOM=require('react-dom');import{HashRouterasRoute

javascript - 如何处理 react 中的进口 hell ?

我正在通过Node.js运行我的React应用程序。有没有办法轻松处理这种导入hell?我在运行./node_modules/.bin/babel-node--presetsreact,es2015server/server.js作为npm启动。server.js是一个简单的ExpressServer,它服务于ReactDOMServer.renderToString()。我的一些react组件有这样的东西:importGenericTemplatefrom"../../templates/GenericTemplate/GenericTemplate";importFooterfro

javascript - typescript 错误地假定该属性是只读的

我有一个用typescript创建的简单react组件,我遇到了以下奇怪的错误。这是我的代码。interfaceState{value:string}classAppextendsReact.Component{constructor(){super();this.state={value:''}}changeHandler=(e:any)=>{letstate=Object.assign({},this.state);state.value=e.target.value;this.setState(state);}render(){return();}}exportdefaultAp

javascript - 使用 React refs 调用子函数的最佳实践

我希望对使用Reactrefs调用子函数有所了解。我有一个父组件,它是一个带有几个按钮的工具栏,在子组件中我可以访问库的导出功能。我想在父组件中单击按钮时调用此导出功能。目前我正在使用Reactrefs来完成这个:Parent.js[引用]classParentextendsReact.Component{onExportClick=()=>{this.childRef.export();}render(){return(Exportthis.childRef=node;}/>)}}Child.js[引用]classChildextendsReact.Component{export(

javascript - ( typescript )属性 'window' 在类型 'Global' 上不存在

我正在使用Mocha/Chai进行单元测试并模拟window如下:global.window={innerHeight:1000,innerWidth:1000};可以理解,TSLint提示:Property'window'doesnotexistontype'Global'几个问题...Global是内置的NodeJS/Typescript类型吗?我目前正在通过文件顶部的declarevarglobal消除警告...但这是处理此问题的最佳方式吗?我注意到我还可以通过以下方式解决警告:declareglobal{namespaceNodeJS{interfaceGlobal{windo

javascript - 如何通过 Content-Security-Policy 允许 `javascript:void(0)` 在 HTML 元素属性中使用?

我希望能够做到或确保即使处理程序未能阻止默认操作也不会发生任何事情。我应该如何声明允许使用Content-Security-PolicyHTTP响应header而不求助于unsafe-eval? 最佳答案 我最近将CSP策略应用于一个巨大的VUE项目,方法是将元header添加到index.html。GoogleChrome会打印关于javascript:的警告链接,但除此之外没有其他任何事情发生。我所做的只是删除href="javascript:属性,并添加了一个样式来保持游标样式:a:hover{cursor:pointer;}

javascript - React native 路由与 React 导航

关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭5年前。Improvethisquestion我正要选择是否使用ReactNavigation或使用ReactRouterNative,我认为ReactNavigation更好,但后来我发现了一些这样的反馈reactnavigationissue,附言:ReactRouterNative具有与ReactRouter相似的API这看起来很简单,我还是迷路了!我需要一个建议

javascript - 从 json 数据动态渲染 React 组件

我有一个像这样的json对象:letdata={UI:{"baseType":"App","children":[{"baseType":"TextField","props":{}}]}};我想把它渲染成:所以,我需要从json对象中获取动态渲染的组件。同样,我写了一个方法:getFromJson(obj){//letType=obj.baseType;letchildren=obj.children?obj.children.map((obj)=>{returnthis.getFromJson(obj,obj.baseType);}):'';//{children});case"T

javascript - 按嵌套属性对对象的对象进行排序

我有一个看起来像下面的对象。我如何根据嵌套对象中的公共(public)属性对此类内容进行排序。我期望的输出是player2根据较高的分数排在第一位。我的挑战是访问每个对象的属性进行排序。这是我的想法和尝试,但它没有进行排序。Object.keys(data).sort(function(p1,p2){returnp1.score-p2.score;}).forEach(function(key){varvalue=data[key];deletedata[key];data[key]=value;});我的数据vardata={player1:{score:4,cards:6},pla