小编dag*_*oin的帖子

让我们在React和React Router的应用程序中使用这样的类.

@observer class Module1 extends React.Component {

  constructor (props) {
    super(props);
    //...
  }

  componentWillMount(){
    //...
  }

  method(){
    //...
  }

  otherMethod(){
    //...
  }

  render() {
    return (
       <ChildComp bars={this.props.bars}/>}
    );
  }
}

让我们采取这样的状态

state = observable({
  module1:{
    bars:{
      //...
    }
  },
  module2:{
    foos:{
      //...
    }
  }
})

Module1组件加载如下:

//index.js
render(
      <Router history={browserHistory}>
        <Route path="/" component={App}>
          <Route path='/map' component={Module1} >
            <Route path="/entity/:id" component={SubModule}/>
          </Route>
          <Route path='/map' component={Module2} >
        </Route>
      </Router>,
      document.getElementById('render-target')
    );

我怎么能把道具传递module1.bars给Module1组件？在终极版我会用<provider>和redux-connect,但我有点在Mobx.js.本丢失

在Redux的入门视频中,我们看到Footer(一个哑组件)使用Filterlink(一个容器).

但是当我读到这篇文章时,似乎(但不是很清楚)只有容器应该使用/渲染容器.

对我来说,如果Footer使用Filterlink(与Redux绑定),我不能在其他不使用Redux的项目上重复使用它.但也许这是一个例外？也许硬编码哑组件仅用于一个项目是可以的吗？

我错过了什么吗？

编辑:Meteor 1.3发布已经发布,即将发布npm包,允许直接使用没有Webpack的CSS模块

我想用https://github.com/gajus/react-css-modules通过NPM流星1.3.但自述文件说要使用Webpack.我从来没有使用Webpack,因为在我看来我和Meteor做同样的构建工作.

那么在这种特定的情况下,您是否知道在Meteor 1.3 beta中使用React Module CSS的方法？

我试图了解如何使用Mobx的可观察数组.

我很难弄清楚为什么这样:

let entities = observable([]);
entities[0] = "foo";
autorun(() =>{
  console.log(entities);
});

写道:

[$mobx: Object]
0: (...)
1: (...)
2: (...)
3: (...)
4: (...)
5: (...)
6: (...)
7: (...)
8: (...)
9: (...)
10: (...)
11: (...)
12: (...)
13: (...)
14: (...)
15: (...)
16: (...)
17: (...)
...
999: (...)

而不是经典阵列？

假设我有一个不知道Redux的地理定位服务,我将其配置如下:

backgroundGeoLocation.configure(
  callback // will be called with an argument when the coordinates change
);

什么是最简单的方法使服务回调调度Redux操作而不store从单独的模块导出并使用store.dispatch()(因为这将是一个单例)？

我对Redux状态树中的内容感到有些失落.

我看到了关于在状态树中存储什么的两个相互矛盾的陈述.

• React doc告诉我们,只有用户输入应该存储在状态树中.

在原始列表的产品传递中作为道具,所以这不是状态.搜索文本和复选框似乎是状态,因为它们随时间变化并且无法从任何事物计算.最后,过滤的产品列表不是状态,因为它可以通过将原始产品列表与搜索文本和复选框的值组合来计算.

• Redux doc告诉我们,我们经常应该在单个状态树中存储UI状态和数据:

对于我们的待办事项应用,我们希望存储两种不同的东西:

• 当前选择的可见性过滤器;
• todos的实际列表.

您经常会发现需要在状态树中存储一些数据以及一些UI状态**.这很好,但尝试将数据与UI状态分开.

所以React告诉我们不应该存储数据(我说的是todos的数据),对我来说,Redux告诉相反的事情.

根据我的理解,我倾向于React方面,因为React和Redux都旨在通过存储来预测UI状态:

1. 所有无法计算的内容(例如:所有人类输入)并且是UI的一部分:

   • 复选框值
   • 输入值
   • 无线电价值
   • ...

2. 所有可用于构建查询并将其发送到API /数据库的最小数据,这些数据将返回完整的用户配置文件,朋友列表,等等......:

   • 用户身份
   • 创建日期范围
   • 物品ID
   • ...

对我来说,排除所有数据库/ API结果,因为:

• 它站在数据层面
• 可以通过发送权限(并由纯缩减器计算)查询来计算.

那你在这里有什么看法？

编辑:我最终选择了Mobx.js,详情请参阅@mweststrate答案.

关于redux的所有学习资源都展示了如何将它与普通对象模型一起使用.但是当你使用一些es6 Class模型时,我无法弄清楚如何使用它.

例如,让我们采用这种状态形状:

{
 players:{
   000:{
     life:56,
     lvl:4,
     //...
  },
   023:{
     life:5,
     lvl:49,
     //...
  },
   033:{
     life:679,
     lvl:38,
     //...
  },
   067:{
     life:560,
     lvl:22,
     //...
  },
  //...
}

而这堂课(未经测试)

class Player{
  id; //int
  life; //int
  lvl; //int
  buffs; //[objects]
  debuffs; //[objects]
  inventory; //[objects]

  _worldCollection; //this class know about the world they belongs to.

  constructor({WorldCollection}){
    this._worldCollection = WorldCollection;
  }

  healPlayer(targetId, hp){
   this._worldCollection.getPlayer(targetId).setHealth(hp);
  }

  // setter
  setHealth(hp){
    this.life += hp;
  }
}

想象一下,我在WorldCollection中收集了100名玩家.什么是最好的方法？

取1:将所有属性从实例复制到状态树

{
  players:{
    001:{
      life: 45,
      lvl: 4,
      buffs: …

我尝试在打字稿中使用GeoJson,但编译器会为这两个变量抛出错误: Generic type 'Feature<T>' requires 1 type argument(s)

  const pos = <GeoJSON.Feature>{
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [0, 1]
    }
  };

  const oldPos = <GeoJSON.Feature>{
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [2, 4]
    }
  };

这应该是什么意思？

我尝试访问我的组件中的一些引用.但我在控制台中有这个错误. withRouter.js:44 Warning: Stateless function components cannot be given refs (See ref "pseudo" in FormInputText created by RegisterForm). Attempts to access this ref will fail.

这是我的组件:

class RegisterForm extends React.Component {

  render() {
    return (
      <form action="">
        <FormInputText ref="pseudo"  type="text" defaultValue="pseudo"/>
        <input type="button" onClick={()=>console.log(this.refs);} value="REGISTER"/>
      </form>
    );
  }
}

另外,当我点击Object {pseudo: null}控制台上的按钮时.我期待一个对象null.

我不确定为什么这不起作用.请注意我的反应树使用mobx-react.

文件AppActions.ts

export enum Actions{
  START = 0,
  RECOVER,
  FIRST_RUN,
  ALERT_NETWORK,
  LOADING_DATA,
  RECEIVED_DATA,
  GO_OFFLINE,
  GO_ONLINE
}

文件PlayerActions.ts

import {Actions} from "./AppActions.ts"
enum Actions{
  HEAL_SINGLE,
  HIT_SINGLE
}

通常，关于本手册，它应该在编译时引发错误。但：

1- PlayerActions.ts似乎没有扩展现有的Actions枚举。（在WebStorm中import {Actions} from "./AppActions.ts"为灰色）

2-编译器不会抛出任何错误。

那么在多个文件中声明Enum的正确方法是什么？