Meteor/React、CreateContainerと子コンポーネントを介して状態を渡すか？

Question

私はMeteor/Reactを使用しています。私はTasksを購読しているTaskコンポーネントのメインコンテナを持っています。子コンポーネントでは、タスクを表示しますが、タスク（createdAt、Nameなど）をソートするためのドロップダウンリストを持っています。

私はこれをSessionとBlazeで使いましたが、私はReactを使っていて、同じことをしていないようです。ソート作業リストをどのように反応させるかわからない。今私がしようとしていることは（それが良い方法かどうかわからない）Appコンポーネントで状態を設定し、それをコンテナと子に送信することです。

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ここで

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

はまた、私はちょうど状態 "仕分け" 必要があります... impricatedコンポーネントです：

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()} 
    ... 

最後のポイント、路線：パネル、TodosPageの子を頼みますこのTasksContainerでは、AppClassの他の子ではありません...この状態だけをこの子に配布することはできますか？

ありがとうございます。

Answer 1

実際にはほとんどあります。基本的に、あなたが望むのは、子供と父親の間のコミュニケーションです。私はあなたが答えhereを見つけることができると思います。

親テンプレートに状態fooを定義し、fooの状態を更新する機能bar()を定義することです。それらを小道具としてコンテナに渡します。その後、this.props.bar()を呼び出すことによって、状態を子供から変更することができます。状態が変化するとレンダリングがトリガーされ、子を新しい値で更新します。

私は非常に明示したリンクの答えを見つけました、あなたが探しているものがいいと思います。