0

私は実際にreactjsを学んでおり、TODOと呼ばれる「親コンポーネント」の中にラップされた小さなTODOリストを実際に開発しています。

この親の内部で、関係するストアから TODO の現在の状態を取得し、この状態をプロパティとして子コンポーネントに渡します。

問題は、親状態の値をどこで初期化するかわからないことです。

実際、私は ES6 構文を使用しているため、getInitialState() 関数はありません。コンポーネントコンストラクターを使用してこれらの状態値を初期化する必要があるとドキュメントに書かれています。

実際には、コンストラクター内で状態を初期化したい場合、 this.context (Fluxible Context) は実際には未定義です。

初期化を componentDidMount 内に移動することにしましたが、アンチ パターンのようで、別の解決策が必要です。手伝って頂けますか ？

これが私の実際のコードです：

import React from 'react';
import TodoTable from './TodoTable';
import ListStore from '../stores/ListStore';

class Todo extends React.Component {

  constructor(props){
    super(props);
    this.state = {listItem:[]};
    this._onStoreChange = this._onStoreChange.bind(this);
  }

  static contextTypes = {
      executeAction: React.PropTypes.func.isRequired,
      getStore: React.PropTypes.func.isRequired
  };

  componentDidMount() {
      this.setState(this.getStoreState()); // this is what I need to move inside of the constructor
      this.context.getStore(ListStore).addChangeListener(this._onStoreChange);
  }

  componentWillUnmount() {
      this.context.getStore(ListStore).removeChangeListener(this._onStoreChange);
  }

  _onStoreChange () {
   this.setState(this.getStoreState());
 }

  getStoreState() {
      return {
          listItem: this.context.getStore(ListStore).getItems() // gives undefined
      }
  }

  add(e){
    this.context.executeAction(function (actionContext, payload, done) {
        actionContext.dispatch('ADD_ITEM', {name:'toto', key:new Date().getTime()});
    });
  }


  render() {
    return (
      <div>
        <button className='waves-effect waves-light btn' onClick={this.add.bind(this)}>Add</button>
        <TodoTable listItems={this.state.listItem}></TodoTable>
      </div>
    );
  }
}


export default Todo;
4

1 に答える 1

1

Fluxible ユーザーとして、 Fluxible アドオンの恩恵を受ける必要があります。

次の例では、FooStore と BarStore の変更をリッスンし、コンポーネントのインスタンス化時に foo と bar を props として渡します。

class Component extends React.Component {
    render() {
        return (
            <ul>
                <li>{this.props.foo}</li>
                <li>{this.props.bar}</li>
            </ul>
        );
    }
}

Component = connectToStores(Component, [FooStore, BarStore], (context, props) => ({
    foo: context.getStore(FooStore).getFoo(),
    bar: context.getStore(BarStore).getBar()
}));

export default Component;

詳細については、 fluxibleの例を参照してください。コードの抜粋:

var connectToStores = require('fluxible-addons-react/connectToStores');
var TodoStore = require('../stores/TodoStore');
...

TodoApp = connectToStores(TodoApp, [TodoStore], function (context, props) {
    return {
        items: context.getStore(TodoStore).getAll()
    };
});

その結果、setState を呼び出す必要はありません。すべてのストア データはコンポーネントの props にあります。

于 2015-09-06T18:38:55.583 に答える