- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我尝试将存储挂接到通过 React.createClass 定义的 React 组件中。我已经实现了全局状态,但需要进行大量重构。
我将分享相关代码并继续回答问题。
操作
var Reflux = require('reflux');
module.exports = Reflux.createActions(['markAllRead']);
商店
var Reflux = require('reflux');
var StoreActions = require('../actions/storeActions/notifications');
var React = require('react');
module.exports = Reflux.createStore({
init: function(){
this.listen(StoreActions.markAllRead, this.markAllRead);
this.state = {
unreadCount: 5
};
},
markAllRead(count){
this.state = {
unreadCount: 1
};
this.trigger(this.state);
}
});
header 组件
var notificationsStore = require('../stores/notifications');
getInitialState: function() {
// this.state = {}; // our store will add its own state to the component's
// this.store = notificationsStore; // <- just assign the store class itself
return {
notificationsData: this.props.notificationsData,
state: {},
store: notificationsStore
};
},
渲染函数内部
<div onClick={this.toggleNotifications} className='bell' id='bell'>
<Glyphicon glyph='bell' id='bell'></Glyphicon>
{
this.state.store.state.unreadCount > 0 ?
<span className='notBadge' id='bell'><span id='bell'>{this.state.store.state.unreadCount}</span></span>
: null
}
</div>
<div id='notificationsPanel' className='notificationsPanel'>
<NotificationsList list={this.state.notificationsData.notifications} clickHandler={this.clickHandler}/>
<div className='footer notification_bar'>
<span className='pull-left'><a onClick={this.seeAll}>See all</a></span>
<span className='pull-right'><a onClick={this.markAllRead}>Mark all as read</a></span>
</div>
</div>
......
updateReadStatus: function(){
notificationsStore.markAllRead();
},
markAllRead: function(){
ActionsNotifications.markAllRead().then(this.updateReadStatus); // API call
},
在函数updateReadStatus
中,我手动调用存储方法(markAllRead)。因为我已经在商店里听过,所以触发操作的正确方法是什么?
其次,我当前收到的存储状态为 this.state.store.state.someVariable
。如何让 getInitialState
或任何其他函数中的生活变得简单,只做 this.state.someVariable
? getInitialState 中注释的行在 constructor(){} 中很有用,但在我的 createClass() 设置中却没有用
谢谢!
最佳答案
目前还不清楚您使用的是哪个版本的 Reflux,但我会尽力向您提供有关如何完成这项工作的总体概述...
Reflux 是一个非常简单的通量实现,你有一个非常线性的控制流 -
组件 -(调用)-> 操作 -(处理)-> 存储 -(触发)-> 组件
考虑到这一点,您需要遵循一些非常简单的准则。任何组件只能使用 Action 来触发 store 中的状态更改。反过来,存储必须使用 trigger
函数在其状态更新时触发组件重新渲染。因此,您只需要在组件中调用 markAllRead
方法来依次调用操作。
关于长存储引用问题...您应该能够使用各种组件 - 存储连接机制来使其不那么冗长。现在这取决于您的 Reflux 版本,但以下应该可以工作 -
使用connect
mixin 让您的组件与 Store 连接,这样它不仅可以在 Store 触发调用上重新渲染,而且还可以在给定的状态变量上公开 Store 状态。一个简单的例子是 -
var HeaderComponent = React.createClass({
mixins: [Reflux.connect(notificationStore,"notifications")],
render: function() {
// Use "this.state.notifications.unreadCount" etc.
}
});
希望这有帮助。
关于reactjs - Hook Reflux 存储在 React.createClass 中并以正确的方式触发操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47132866/
有人知道为什么会出现此警告吗? 另一个警告是:ReactNative.createElement 已被弃用。请改用“react”包中的 React.createElement。 代码是: var Re
var React = require('react'); module.exports=React.createClass({ render:function(){ return(
我正在挖掘 React.js 源代码,这就是我目前正在尝试理解的内容。 var ReactClass = { /* * @param {object} spec Class speci
如何在 React.createClass() 中处理自定义 JavaScript 属性? 这里是示例: var RouterView = React.createClass({ mixins:
可能是一个基本问题,但为什么它在 React 中,当你使用 createClass 时它可以接受 specification object采用键值对格式,例如 React.createClass({
我有一个我正在努力解决的范围问题。 我将 getTrackNotes 导入到 es6 模块中,我想按照下面的方式在 React 类中引用它,但它被设置为 Track(React 类)。 如何引用它?
我正在尝试在 React 中创建一个函数,它最终应该进行一些计算并将结果返回到我的组件。该功能尚未完成,所以如果我的说明没有意义,请耐心等待。 我正在使用React.createClass。 代码如下
有什么不同 var MyClass = React.createClass({...}); 到 class MyClass extends React.Component{...} 最佳答案 这两种方
这个问题在这里已经有了答案: Arrow Function in Object Literal [duplicate] (1 个回答) 关闭 5 年前。 我正在尝试调用 React.createCl
我是 React 新手,对于这个非常基本的问题感到抱歉。我在 Google 上搜索并尝试了其他 StackOverflow 帖子,但没有任何效果。我正在尝试创建一个带有验证的表单,我发现了这个示例:
我有一些使用 React.createClass 创建的组件的 React 代码。 某些组件将对象上的内容存储为普通属性,例如this.foo 与 this.props.foo 或 this.stat
我是一名新的 JS 开发人员,我正在探索 React-Native。我最近购买了邦妮·艾森曼 (Bonnie Eisenman) 的“Learning React Native”,并且正在从事第一个迷
我想在我的小项目中尽可能使用 ES6 (ES2015)。现在我想在 React 中使用箭头函数。 // What I want let Text = React.createClass({ c
我是 React 新手,正在尝试掌握语法。 我正在 React 15 环境中进行开发(使用 React-starterify 模板),并且一直在使用下面版本 2 中的语法,但是,我在 Facebook
我很困惑组件和 react 类之间有什么区别? 什么时候我应该在 React 类上使用组件?看起来组件就是一个类,而 createClass 创建了一个组件。 https://facebook.git
警告 - 这听起来像是有史以来最菜鸟的问题,但我认为对于最初尝试处理 React 组件的人来说这是一件令人困惑的事情(或者也许我是个白痴哈哈),但我认为这将是一个很好的选择初学者社区的问题。 所以我想
我想在 Android 上使用 React Native 创建一个简单的应用程序。我使用此源代码来创建工具栏:https://rnplay.org/apps/CHOsPg但我收到了这个错误: unde
我想将带有 createClass 的代码转换为 ES6 类。当涉及到带有 getInitialState 函数的类时,我遇到了一些麻烦。 下面是我尝试转换的代码: var StockRow = Re
我觉得我已经看过 React 的 creatClass 的两个版本,前者在文档中更为明显。除了风格上的区别,两者之间有什么区别吗?奇怪的是,第一种样式看起来像是在接受一个对象,而第二种样式只是一个范围
我有一个带有 webpack 模块构建器的 ReactJS 应用程序,以下是我的 中的配置webpack.config.js var path = require('path'); var webpa
我是一名优秀的程序员,十分优秀!