草庐IT

React-tutorial

全部标签

javascript - 使用 enzyme 测试对 React 组件状态的更改并监视实例方法

我正在开发一个包装器组件,以便在React中顺利加载图像。我将enzyme与mocha、chai和sinon一起使用来对我的组件进行单元测试。在这里的测试中,我试图测试:组件的状态在图像加载后更新调用了组件上的onLoad实例方法constwrapper=shallow();constonLoad=wrapper.find('img').props().onLoad;constonLoadSpy=sinon.spy(onLoad);wrapper.update();conststatus=wrapper.state().status;expect(onLoadSpy).to.have.

javascript - 将动画与样式组件一起使用( react native )

我遇到以下错误(通过iOS测试):Cannotreadproperty'getScrollableNode'ofnull尝试使用react-native的Animated沿边styled-components用于react和react-native的样式工具。这是一个的例子我创建的组件:importReactfrom'react';import{Image,Dimensions}from'react-native';importstyledfrom'styled-components/native';const{width}=Dimensions.get('window');const

javascript - react 淡入元素

我有一个Basket组件,它需要在点击时切换一个BasketContents组件。这有效:constructor(){super();this.state={open:false}this.handleDropDown=this.handleDropDown.bind(this);}handleDropDown(){this.setState({open:!this.state.open})}render(){return(Open{this.state.open?:null})}它使用条件判断是否显示BasketContents组件。我现在想让它淡入。我尝试将ComponentDid

javascript - 如何在 Alert 函数 [React-Native] 上从 onPress 调用方法

如何在Alert函数[React-Native]上从onPress调用方法Alert.alert('AlertTitle','alertMessage',[{text:'Cancel',onPress:()=>console.log('CancelPressed!')},{text:'OK',onPress:()=>{this.onDeleteBTN}},],{cancelable:false})}}>DeleteRecord在AlertDialog上的OK按钮之后我要打电话onDeleteBTN=()=>{alert('OnDelete');}{text:'OK',onPress:(

javascript - react + 助焊剂 : Getting initial state into a store

我们最近从Angular切换到React+Flux来构建一个相当复杂的业务应用程序。采用让一个容器组件将所有状态作为属性传递到组件树下的方法并不是为我们开发应用程序的实用方法,因为该应用程序使用类似页面的大型模式。确实有足够的状态传递给模式,以便他们将数据加载到他们的存储中。我遇到的问题是我需要将一些初始状态(作为Prop传递)放入模态组件的商店中。在thispostFacebook的好人说,当同步不是目标时,可以使用props作为初始状态。这就是我目前将初始状态放入我的商店的方式:varABC=React.createClass({...getInitialState:functio

javascript - 在 React JS 中创建 <select> 元素

我正在用react.js重写我的网络应用程序的UI,但我被以下问题难住了。我有一个显示通过AJAX请求获得的数据的页面,在该页面下方,显示了一个用于提交新数据的表单。一切顺利。现在,我想添加一个元素到表单,并从不同的位置(url)获取值。当前代码(没有)看起来像这样(稍微简化了一点,但所有工作细节都是一样的;它主要遵循react.js网站上的教程):vartasks_link=$('#tasks_link');vargetDataMixin={loadDataFromServer:function(){$.ajax({url:this.props.url,dataType:'json'

javascript - 自动对焦 React JS 中的输入元素

我无法自动聚焦在此组件中呈现的输入标签。我在这里缺少什么?classTaskBoxextendsComponent{constructor(){super();this.focus=this.focus.bind(this);}focus(){this.textInput.focus();}componentWillUpdate(){this.focus();}render(){letprops=this.props;return({this.textInput=input;}}onBlur={props.blurFN}/>Imp.Urg.RoleAddgoal)}}感谢任何帮助。

javascript - React redux 应用文件夹结构

关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我了解react/redux应用程序的概念。我的问题是,是否有一种首选的方式来布置文件夹结构和文件。在网上对repos进行了大量研究后,似乎每个人的做法都略有不同,具体取决于他们的代码风格。另一方面,Angular似乎有一个集合结构。这是否让React变得更强大,因为您可以根据需求的变化进行微调和调整?社区是否就任何既定模式达成一致?

javascript - 使用其名称 react 渲染组件

我正在试验React.js,它运行得非常好。我想知道是否可以像这样将类注入(inject)其他类:varContainer=React.createClass({render:function(){}});假设implComponent已像这样传递:React.render(,document.getElementById('content'));由于语法错误,这不起作用。我很容易理解为什么。换句话说,我想根据名称将类注入(inject)其他类。这可能吗?我该怎么做? 最佳答案 你很接近。您需要自己传递组件类(不是字符串),然后因为

javascript - 可以递归定义 React prop 类型吗?

假设我们正在定义一个将显示树的React类。React.createClass({propTypes:{tree:treeType},render:function(){//...}});这是treeType的定义,它显然不起作用,但希望能说明我要表达的意思。vartreeType=React.PropTypes.shape({value:React.PropTypes.string,children:React.PropTypes.arrayOf(treeType)})有没有办法让类型懒惰地引用自己,这样就可以工作了? 最佳答案