流星/反应，通过CreateContainer和子组件传递状态？

Question

我正在使用流星/反应，我有一个主要容器的任务组件，我在任务上订阅。现在，在子组件上，我显示任务，但我希望有一个下拉列表来排序任务（createdAt，Name等...）

我使用Session with Blaze做了这个，但在这里， m使用React，它看起来工作不一样。我不知道如何使排序任务列表反应。我现在想做的事情（我不知道这是否是好方法）是在应用程序组件中设置状态并将其发送给容器和子级。

AppClass

constructor(props){ 
    super(props); 
    this.state = this.getMeteorData(); 
    this.sortTasks = this.sortTasks.bind(this); 
} 

getMeteorData(){ 
    return { 
     sorting: { createdAt: -1 }, 
    }; 
} 

sortTasks(sorting) { 
    this.setState({ sorting: sorting }); 
} 


render(){ 
    const childrenWithProps = React.Children.map(this.props.children, (child) => 
     React.cloneElement(child, { 
      sorting: this.state.sorting, 
      sortTasks: this.sortTasks.bind(this), 
     }) 
    ); 
    return <div>{childrenWithProps}</div> 
} 

集装箱

export default TodosContainer = createContainer(({props}) => { 

    Meteor.subscribe('tasks'); 

    return { 
    tasks: Tasks.find({}, { sort: props.sorting }).fetch(), 
    sorting: props.sorting, 
    sortTasks: props.sortTasks, 
    }; 

}, TodosPage); 

TodosPage

const propTypes = { 
    .... 
    sorting: PropTypes.string.isRequired, 
} 

render() { 
    return (
    ... 
    {(() => { 
     if (this.state.listSelected) { 
      return (
       <TaskPanel 
        tasks = {this.props.tasks} 
        sorting = {this.props.sorting} 
        sortTasks = {this.props.sortTasks} 
       /> 
      ); 
     } 
    })()} 

而经过时，T问面板，孩子TodosPage的：

const propTypes = { 
    .... 
    sorting: PropTypes.string.isRequired, 
} 

handleSelect(event, sorting) { 
    switch(event) { 
     case 1: return this.props.sortTasks({ createdAt: -1 }); 
     case 2: return this.props.sortTasks({ createdAt: 0 }); 
    }; 
} 

render() { 
    return (
    <DropdownButton 
     onSelect={(event, sorting) => this.handleSelect(event, this.props.sorting)} 
     <MenuItem eventKey="1">Created Date Asc</MenuItem> 
     <MenuItem eventKey="2">Created Date Desc</MenuItem> 
    </DropdownButton> 
    ... 
    {this.renderTasks()} 
    ... 

最后一点，路线：

<Route path="/admin" component={AdminAppContainer}> 
     <IndexRoute component={AdminMainContainer}/> 
     <Route path="todos" component={TasksContainer}> 
      <Route path=":listId" component={TodosPage}/> 
     </Route> 
    </Route> 

这里是impricated部件......另外，我只需要在状态 “排序”在这个TasksContainer中，但不在AppClass的其他孩子中......我可以只将这个状态分配给这个孩子吗？

感谢您的帮助:)

Answer 1

实际上，你几乎没有。基本上，你想要的是父母之间的沟通。我想你可以找到答案here。

这个想法是，你在父模板中定义了一个状态foo和函数bar()，它更新了foo的状态。你把它们作为道具传递给容器。然后可以通过致电this.props.bar()来改变该州的状态。当状态改变时，这将触发一个渲染，从而用新值更新孩子。

我在链接中找到了答案，我放在了相当明确的位置，希望这就是您要找的。