Reactjs，父組件，狀態和道具

Question

我實際上正在學習reactjs，而我實際上正在開發一個包含在名爲TODO的「父組件」內的小T​​ODO列表。

在這個父類的內部，我想從關注的存儲中獲取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; 

Answer 1

正如你應該從Fluxible addons受益變化無常的用戶：

• connectToStores。

以下示例將偵聽FooStore和BarStore中的更改，並在實例化時將foo和bar作爲道具傳遞給Component。

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 example瞭解更多詳情。代碼exсerpt：

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結果，所有的存儲數據將在組件的道具。