草庐IT

react-360

全部标签

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 - 我可以在 react-native 中使用 reactJS 库吗?

好吧,这可能是个愚蠢的问题,但我想澄清一下原因。React-Native导入了nodeJS库,所以我认为也可以使用reactJS库,尽管reactJS包含纯html组件。reactnative可以识别包括html在内的reactJS组件吗? 最佳答案 react库实际上没有任何与浏览器DOMHTML相关的内容。任何与之相关的东西都被分离到react-dom包中。ReactNative不会也不能使用这个库,因为你在ReactNative应用程序下没有DOM。但是,如果安装必要的转译库,您可以在浏览器中使用为移动应用程序编写的大部分代码

javascript - react native - 在 package.json 中使用别名进行绝对导入

我看到一些项目使用import'@someDir/something',它解决了相对导入的问题。然后我找到了这个blogpost说说这个方法。它基本上告诉您在目录中创建package.json并指定它们的别名。我在我基于expo的react-native项目中实现了它,效果很好。像这样:{"name":"@someDir"}在src/someDir/package.json中。而且我可以在任何地方导入'@someDir/something'。为什么会这样?背后发生的魔法在哪里?Webpack还是babel还是react-native本身?我看到了anissue正在讨论此功能,但我不知道

javascript - React-navigation: "You should only render one navigator"- 但我只有一个

我刚刚将react-navigation升级到v2.0-rc9,它会提示Youshouldonlyrenderonenavigatorexplicitlyinyourapp,andothernavigatorsshouldbyrenderedbyincludingtheminthatnavigator.我只有一个导航器,如下图,我不明白那是从哪里来的。您能否指出该错误的可能原因?下面是我的根组件和我创建导航器的方式。根.js:importReact,{PureComponent}from'react';import{Provider}from'react-redux';importst

javascript - 在 React 组件中渲染 Phaser.io Canvas

importReact,{Component}from'react';importPhaserfrom'phaser';exportdefaultclassAppextendsComponent{constructor(props){super(props);this.game=null;this.create=()=>{this.game.stage.backgroundColor='#124184';}}componentDidMount(){this.game=newPhaser.Game(800,600,Phaser.CANVAS,'phaser-target',{create

javascript - Jest onSpy 不识别 React 组件函数

尽管尝试了一切,但这个让我完全难住了。我正在使用Jest/Enzyme测试React组件。此测试模拟修改元素,然后调用onChange方法。当我运行测试时,我从Jest得到这个:CannotspytheonChangepropertybecauseitisnotafunction;undefinedgiveninstead为什么??以下是组件的关键部分:importReact,{Component}from'react';importEntitiesPulldownfrom'./entities-pulldown'classNewTransactionFormextendsCompon

javascript - 使用 react-beautiful-dnd 嵌套拖放

我正在使用react-beautiful-dnd创建垂直嵌套拖放。我提到了一些answersingithub我从沙箱中fork出来,并为垂直嵌套拖放创建了一个新沙箱。当我更改内部DND时,外部DND更改的值不是内部DND。代码onDragEnd(result){//droppedoutsidethelistconsole.log("innnerdrag");if(!result.destination){return;}constitems=reorder(this.state.items,result.source.index,result.destination.index);th

javascript - 如何使用 React hooks 处理/链接依赖于另一个的同步副作用

我正在尝试将我的应用程序从redux重写为新的上下文+Hook,但不幸​​的是,我很难找到一种好方法来处理一系列依赖于前一个响应的同步副作用。在我当前的redux应用程序中,我大量使用同步/链接操作和API请求,我通常通过redux-saga或thunk处理这些请求。因此,当返回第一个API请求的响应时,该数据将用于下一个API请求等。我做了一个自定义钩子(Hook)“useFetch”(在这个例子中它没有做太多,因为它是一个简化的版本,我还必须做一个小的调整才能在codesandbox上工作-请参见下面的代码)。问题在于,由于“钩子(Hook)规则”,我不能在useEffect钩子(

javascript - 在 setTimeout 中调用的函数不使用当前的 React 状态

快速总结我正在尝试创建一个按钮,它既有常规点击功能,又有用户点击并按住它时发生的单独操作,类似于Chrome中的后退按钮。我这样做的方式涉及一个setTimeout()和一个检查状态的回调。出于某种原因,回调正在使用调用setTimeout()时的状态,而不是调用回调时的状态(1秒后)。您可以在codesandbox上查看我是如何努力实现这一目标的为了获得此功能,我在MouseDown上调用setTimeOut()。我还将处于状态的isHolding设置为true。onMouseUp我将isHolding设置为false并且还运行clickHandler(),这是一个Prop,如果ho

javascript - React Hooks useEffect,添加依赖触发死循环

在我的useEffect中,我有一个Prop依赖项(setIsValid)。当我将此依赖项添加到useEffect时,它会陷入无限循环。调用子组件时为父级:constsetIsValid=(bool)=>{consttmpStateCopy=Object.assign({},state);tmpStateCopy.isValid=bool;setState(tmpStateCopy);};return在子组件中:const{setIsValid}=props;const[state,setState]=useState({transformations:[],duplicateInde