0

我试着习惯于回流并分叉了一个示例回购。我的完整代码在这里 [ https://github.com/svenhornberg/react-starterkit ]

我想创建一个计时器组件，它从时间存储中获取当前时间，但它不起作用。DevTools 没有显示任何错误。这一定是一些新手错误，但我没有发现它们。

Edit1 : 我在 home //edit1 中添加了一行

Edit2：我认为错误可能在 home.jsx 中的 componentDidMount

已修复我需要触发我的时间，请参阅我的答案。

店铺

import Reflux from 'reflux';
import TimeActions from '../actions/timeActions';

var TimeStore = Reflux.createStore({
    listenables: timeActions,

    init() {
        this.time = '';
    },

    onCurrenttime() {
        this.time = '13:47';
    }
});

导出默认时间存储；

行动

import Reflux from 'reflux';

var TimeActions = Reflux.createActions([
  'currenttime'
]);

export default TimeActions;

零件

import React from 'react';

class Timer extends React.Component {

  constructor(){
    super();    
  }

  render() {
    var time = this.props.time;

    return (
      <div>
        { time }
      </div>
    );
  }

}

Timer.propTypes = {
  time : React.PropTypes.string
}

export default Timer;

我想在home.jsx中使用计时器组件

import React from 'react';
import ItemList from '../components/itemList.jsx';
import ItemStore from '../stores/itemStore';
import ItemActions from '../actions/itemActions';

import Timer from '../components/timer.jsx';
import TimeStore from '../stores/timeStore';
import TimeActions from '../actions/timeActions';

class Home extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      items : [],
      loading: false,
      time : '' //edit1
    };
  }

  componentDidMount() {
    this.unsubscribe = ItemStore.listen(this.onStatusChange.bind(this));
    this.unsubscribe = TimeStore.listen(this.onStatusChange.bind(this));

    ItemActions.loadItems();
    TimeActions.currenttime();
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  onStatusChange(state) {
    this.setState(state);
  }

  render() {

    return (
      <div>
        <h1>Home Area</h1>
        <ItemList { ...this.state } />
        <Timer { ...this.state } />
      </div>
    );
  }
}

export default Home;
4

1 回答 1

1

我通过以下方式修复了它：How to Make React.js component listen to a store in Reflux

我必须触发我的时间：

var TimeStore = Reflux.createStore({
    listenables: TimeActions,

    init() {
        this.time = '';
    },

    onCurrenttime() {
      this.trigger({
        time : '13:47'
      });
    }
});
于 2015-05-31T19:33:36.297 回答