Questions tagged «reactjs»

我有一个组件库，我正在编写使用Jest和react-testing-library的单元测试。基于某些道具或事件，我想验证是否未渲染某些元素。 getByText，，getByTestId等引发错误，react-testing-library如果找不到该元素，则会导致该expect函数触发之前测试失败。 您如何使用react-testing-library测试是否在笑话中不存在？

102 reactjs  jestjs  react-testing-library 

我现在正在做一些React，我想知道是否有一种“正确的”方式来进行条件样式设计。在本教程中，他们使用 style={{ textDecoration: completed ? 'line-through' : 'none' }} 我不想使用内联样式，因此我想使用一个类来控制条件样式。一个人将如何以React的思维方式来实现这一目标？还是应该只使用这种内联样式方式？

102 javascript  reactjs 

我正在使用Reactjs，编写一个菜单组件。 "use strict"; var React = require("react"); var Menus = React.createClass({ item_url: function (item,categories,articles) { console.log('afdasfasfasdfasdf'); var url='XXX'; if (item.type == 1) { url = item.categoryId == null ? 'javascript:void(0)' : path('buex_portal_browse_category', {slug: categories[item.categoryId].slug}); } else if (item.type == 2) { url = item.articleId == null ? 'javascript:void(0)' : path('buex_portal_view_article', …

101 javascript  reactjs  this  map-function 

PropTypes和Flow涵盖了类似的内容，但是使用的是不同的方法。PropTypes可以在运行时向您发出警告，这有助于快速找到来自服务器等的格式错误的响应。但是，Flow似乎是未来，并且泛型等概念是非常灵活的解决方案。另外，Nuclide提供的自动补全功能对Flow来说是一大优势。 我现在的问题是，在开始新项目时哪种方法最好。还是同时使用Flow和PropTypes是一个好的解决方案？使用两者的问题是您编写了大量重复的代码。这是我编写的音乐播放器应用程序的示例： export const PlaylistPropType = PropTypes.shape({ next: ItemPropTypes, current: ItemPropTypes, history: PropTypes.arrayOf(ItemPropTypes).isRequired }); export type Playlist = { next: Item, current: Item, history: Array<Item> }; 这两个定义基本上都包含相同的信息，并且当数据类型更改时，两个定义都需要更新。 我发现这个babel插件可以将类型声明转换为PropTypes，这可能是一个解决方案。

101 reactjs  flowtype  react-proptypes 

我和我的团队已经获得了用于开发企业级Web应用程序的资金（不会详细介绍其功能）。该应用程序将具有许多单独的网页，但是其中两个页面更加集中且非常繁琐-就像许多用户交互，显示大量数据的模式，Websocket连接，聊天等一样繁重。 我已被任命为该项目的首席架构师，所以我正在对最新的Web框架进行一些研究。对于后端，我们已经进行了一些测试，并决定使用Azure SQL平台。到目前为止，我喜欢ASP.NET Core 2.0所做的改进。特别是Razor引擎，它是ASP.NET MVC早期版本的基础。 我想就“新” Razor vs. Angular / React之类获得一些专家意见。我特别关注性能。Core 2.0 Razor如何支持客户端渲染框架？差异可以忽略不计吗？我们的应用程序定位到潜在的1,000,000用户（大约100,000个并发用户）。 提前致谢！

101 asp.net  angular  reactjs  razor 

我在React还是很新，但是我一直在慢慢地学习，遇到了一些我坚持的事情。 我正在尝试在React中构建一个“计时器”组件，说实话，我不知道我是否做得正确（或有效）。在下面的代码中，我将状态设置为返回对象，{ currentCount: 10 }并且一直在与componentDidMount，玩弄componentWillUnmount，render并且我只能使状态从10倒数到9。 分两部分的问题：我怎么了？而且，有没有一种更有效的方式来使用setTimeout（而不是使用componentDidMount＆componentWillUnmount）？ 先感谢您。 import React from 'react'; var Clock = React.createClass({ getInitialState: function() { return { currentCount: 10 }; }, componentDidMount: function() { this.countdown = setInterval(this.timer, 1000); }, componentWillUnmount: function() { clearInterval(this.countdown); }, timer: function() { this.setState({ currentCount: 10 }); }, render: function() { var displayCount …

101 javascript  reactjs  settimeout  state 

我想检查一下当您多次使用this.setState时发生了什么（为了讨论而两次）。我认为该组件将被渲染两次，但显然它仅被渲染一次。我的另一个期望是，对setState的第二个调用可能会在第一个调用之上运行，但是您猜到了-运行良好。 链接到JSfiddle var Hello = React.createClass({ render: function() { return ( <div> <div>Hello {this.props.name}</div> <CheckBox /> </div> ); } }); var CheckBox = React.createClass({ getInitialState: function() { return { alex: 0 }; }, handleChange: function(event) { this.setState({ value: event.target.value }); this.setState({ alex: 5 }); }, render: function() { alert('render'); return …

101 javascript  reactjs 

我是React.js的新手，我实现了一个组件，在其中我从服务器获取数据并像这样使用它， CallEnterprise:function(TenantId){ fetchData('http://xxx.xxx.xx.xx:8090/Enterprises?TenantId='+TenantId+' &format=json').then(function(enterprises) { EnterprisePerspectiveActions.getEnterprise(enterprises); }).catch(function() { alert("There was some issue in API Call please contact Admin"); //ComponentAppDispatcher.handleViewAction({ // actionType: MetaItemConstants.RECEIVE_ERROR, // error: 'There was a problem getting the enterprises' //}); }); }, 我想将Url存储在配置文件中，所以当我在测试服务器或生产环境中部署Url时，我只需要更改config文件中的url（而不是js文件中的URL），但是我不知道如何在react.js中使用配置文件 谁能指导我如何实现这一目标？

101 javascript  reactjs  configuration  webpack  flux 

ReactJS中什么是受控组件和非受控组件？它们之间有何不同？

101 reactjs  react-component 

进行内联样式设置时，如何在ReactJS中实现悬停事件或活动事件？ 我发现onMouseEnter，onMouseLeave方法存在问题，因此希望有另一种方法可以做到。 具体来说，如果您将鼠标悬停在组件上的速度非常快，则仅会注册onMouseEnter事件。onMouseLeave从不触发，因此无法更新状态...使该组件看起来好像仍在悬停。如果您尝试模仿“：active” css伪类，我会注意到同样的事情。如果单击得非常快，则只会注册onMouseDown事件。onMouseUp事件将被忽略...使组件保持活动状态。 这是显示问题的JSFiddle：https ://jsfiddle.net/y9swecyu/5/ 有问题的JSFiddle视频：https ://vid.me/ZJEO 编码： var Hover = React.createClass({ getInitialState: function() { return { hover: false }; }, onMouseEnterHandler: function() { this.setState({ hover: true }); console.log('enter'); }, onMouseLeaveHandler: function() { this.setState({ hover: false }); console.log('leave'); }, render: function() { var inner = normal; if(this.state.hover) { inner …

101 javascript  css  reactjs  mouseevent  dom-events 

我使用ReactNative为iOS和android构建了一个带有的应用ListView。当使用有效的数据源填充listview时，屏幕底部将显示以下警告： 警告：数组或迭代器中的每个子代都应具有唯一的“键”道具。检查的渲染方法ListView。 此警告的目的是什么？消息后，它们链接到此页面，在此页面上讨论了完整的不同内容，这些内容与react native无关，而与基于Web的reactjs有关。 我的ListView是使用以下语句构建的： render() { var store = this.props.store; return ( <ListView dataSource={this.state.dataSource} renderHeader={this.renderHeader.bind(this)} renderRow={this.renderDetailItem.bind(this)} renderSeparator={this.renderSeparator.bind(this)} style={styles.listView} /> ); } 我的数据源包含以下内容： var detailItems = []; detailItems.push( new DetailItem('plain', store.address) ); detailItems.push( new DetailItem('map', '') ); if(store.telefon) { detailItems.push( new DetailItem('contact', store.telefon, 'Anrufen', 'fontawesome|phone') ); } if(store.email) { detailItems.push( …

101 facebook  listview  reactjs  react-native 

基本上，我有一个react组件，其render()功能主体如下：（这是我的理想组件，这意味着它当前不起作用） render(){ return ( <div> <Element1/> <Element2/> // note: code does not work here if (this.props.hasImage) <MyImage /> else <OtherElement/> </div> ) }

101 reactjs 

我意识到这是一个基本问题，但是我在其他地方找不到答案。 是store.dispatch同步还是异步Redux？ 万一它是异步的，是否有可能在传播了动作之后添加回调，这是可能的React？

100 javascript  reactjs  redux  single-page-application 

单行工作正常 render: function () { return ( {[1,2,3].map(function (n) { return <p>{n}</p> }} ); } 不适用于多行 render: function () { return ( {[1,2,3].map(function (n) { return ( <h3>Item {n}</h3> <p>Description {n}</p> ) }} ); } 谢谢。

100 reactjs 

请记住以下代码： var Component = React.createClass({ getInitialState: function () { return {position: 0}; }, componentDidMount: function () { setTimeout(this.setState({position: 1}), 3000); }, render: function () { return ( <div className="component"> {this.state.position} </div> ); } }); ReactDOM.render( <Component />, document.getElementById('main') ); 难道不应该在3秒后改变状态吗？它立即改变。 我的主要目标是每3秒更改一次状态（使用setInterval()），但是由于它不起作用，因此我尝试了setTimeout()，该方法也不起作用。上面有灯吗？谢谢！

100 javascript  reactjs