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结果，所有的存储数据将在组件的道具。