Tag: reactjs

在组件状态下从arrays中移除元素

我正试图find在组件状态下从数组中移除元素的最佳方法。 由于我不应该直接修改this.statevariables，是否有更好的方法（更简洁）从数组中删除元素比我在这里？ onRemovePerson: function(index) { var newData = this.state.data.slice(); //copy array newData.splice(index, 1); //remove element this.setState({data: newData}); //update state }, 谢谢。

Reactjs：如何修改dynamic子组件状态或从父项道具？

我本质上是试图制定标签反应，但有一些问题。 这里是文件page.jsx <RadioGroup> <Button title="A" /> <Button title="B" /> </RadioGroup> 当您点击buttonA时，RadioGroup组件需要取消selectbuttonB. “Selected”只是表示来自状态或属性的className 这里是RadioGroup.jsx ： module.exports = React.createClass({ onChange: function( e ) { // How to modify children properties here??? }, render: function() { return (<div onChange={this.onChange}> {this.props.children} </div>); } }); Button.jsx的来源并不重要，它有一个触发原生DOM onChange事件的常规HTML单选button 预期的stream程是： 点击button“A” button“A”触发onChange，本地DOM事件，它起泡到RadioGroup RadioGroup onChange监听器被调用 RadioGroup需要取消selectbuttonB. 这是我的问题。 以下是我遇到的主要问题：我不能将<Button>移动到RadioGroup ，因为这样的结构使得子节点是任意的 。 也就是说，标记可能是 <RadioGroup> <Button […]

在什么样的嵌套层次上，组件应该从Flux中的Stores中读取实体？

我正在重写我的应用程序来使用Flux，并且从商店检索数据时遇到问题。 我有很多组件，他们嵌套很多。 其中一些是大的（ Article ），一些是小而简单的（ UserAvatar ， UserLink ）。 我一直在组件层次结构中挣扎，我应该从商店读取数据。 我尝试了两种极端的方法，我都不喜欢： 所有实体组件都读取自己的数据 每个需要来自Store的数据的组件只接收实体ID并自行获取实体。 例如， Article通过articleId ， UserAvatar和UserLink传递给userId 。 这种方法有几个显着的缺点（在代码示例中讨论）。 var Article = React.createClass({ mixins: [createStoreMixin(ArticleStore)], propTypes: { articleId: PropTypes.number.isRequired }, getStateFromStores() { return { article: ArticleStore.get(this.props.articleId); } }, render() { var article = this.state.article, userId = article.userId; return ( <div> <UserLink userId={userId}> <UserAvatar userId={userId} /> […]

React中的内联CSS样式：如何实现：hover？

我非常喜欢React中的内联CSS模式，并决定使用它。 但是，您不能使用:hover和类似的select器。 那么，在使用内联CSS样式时，实现高亮hover的最佳方式是什么？ #reactjs的一个build议是有一个可Clickable组件，并像这样使用它： <Clickable> <Link /> </Clickable> Clickable有一个hovered状态，并把它作为道具传递给Link。 然而， Clickable （我实现它的方式）将Link包装在一个div以便它可以设置onMouseEnter和onMouseLeave 。 这使得事情有点复杂，但是（例如span包裹在一个div行为与span不同）。 有一个更简单的方法吗？

在Reactjs中获取表单数据

我的renderfunction有一个简单的forms，如下所示： render : function() { return ( <form> <input type="text" name="email" placeholder="Email" /> <input type="password" name="password" placeholder="Password" /> <button type="button" onClick={this.handleLogin}>Login</button> </form> ); }, handleLogin: function() { //How to access email and password here ? } 我应该写在我的handleLogin: function() { … }来访问Email和Password字段？

为什么React的文件大小如此之大？

这里是数字 分钟+ gzip 26k gzip 90k 原来的450 + K React在文档中没有很多特性。 为什么这么大？ 我有一种感觉，那就是轻量级DOM的实现。 但我想确定一下。

如何循环和渲染React.js中的元素，而无需映射对象数组？

我试图将一个jQuery组件转换为React.js，而我遇到的一个难题是基于for循环渲染n个元素。 我知道这是不可能的，或build议，并且在模型中存在数组时，使用map是非常有意义的。 没关系，但是如果你没有arrays呢？ 相反，你有数值，相当于给定数量的元素渲染，那么你应该怎么做？ 这里是我的例子，我想根据它的层级在一个元素前加一个任意数量的span标签。 所以在3级，我想在文本元素之前3个span标签。 在javascript中： for (var i = 0; i < level; i++) { $el.append('<span class="indent"></span>'); } $el.append('Some text value'); 我似乎无法得到这个，或者类似于在JSX React.js组件中工作的东西。 相反，我必须做到以下几点，首先build立一个临时数组到正确的长度，然后循环数组。 React.js render: function() { var tmp = []; for (var i = 0; i < this.props.level; i++) { tmp.push(i); } var indents = tmp.map(function (i) { return ( <span […]

React Js有条件地应用类属性

我想有条件地显示和隐藏这个button组，具体取决于从父组件传入的内容，如下所示： <TopicNav showBulkActions={this.__hasMultipleSelected} /> …. __hasMultipleSelected: function() { return false; //return true or false depending on data } …. var TopicNav = React.createClass({ render: function() { return ( <div className="row"> <div className="col-lg-6"> <div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}"> <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Bulk Actions <span className="caret"></span> </button> <ul className="dropdown-menu" role="menu"> […]

如何使webpack dev服务器在端口80和0.0.0.0上运行以使其可公开访问？

我是新来的整个nodejs / reactjs世界，所以如果我的qs听起来很愚蠢，我很抱歉。 所以我在这里玩这个reactjs应用程序： https ： //github.com/bebraw/reactabular 每当我做一个“npm开始”它总是运行在本地主机：8080 如何将其更改为在0.0.0.0:8080上运行以使其可公开访问？ 我一直在尝试阅读上述回购的源代码，但没有find这个设置的文件。 还要补充一点 – 如果可以的话，如何让它在80端口上运行？ 谢谢。

什么是更改React状态的首选方法？

比方说，我有一个在我的this.state.list中的纯对象列表，我可以用来呈现一个孩子的列表。 那么将对象插入到this.state.list的正确方法是什么？ 以下是我认为它将起作用的唯一方式，因为您不能像doc中所提到的this.state直接改变this.state 。 this._list.push(newObject): this.setState({list: this._list}); 这对我来说似乎是丑陋的。 有没有更好的办法？