Question

我正在使用Meteor / React，我有一个Task容器的主容器，我订阅了Tasks。现在，在子组件上，我显示了任务，但我希望有一个下拉列表来对任务进行排序（createdAt，Name等...）

我使用Session with Blaze做了这个，但是在这个中，我使用的是React，它看起来效果不一样。我不知道如何使排序任务列表反应。我现在要做的事情（我不知道这是不是很好的方法）是在App Component中设置状态并将其发送给容器和子项。

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}
                />
            );
        }
    })()}

之后，任务面板，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>

这是被篡改的组件......另外，我只需要在这个TasksContainer中进行状态“排序”，但不需要在AppClass的其他子项中进行“排序”...我可以只将此状态分发给这个孩子吗？

感谢您的帮助：）

Answer 1

你其实几乎就在那里。基本上，你想要的是孩子与父母之间的沟通。我想你可以找到答案here。

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

我在链接中找到了相当明确的答案，希望这是您正在寻找的内容。

Meteor / React，通过CreateContainer和子组件传递状态？

1 个答案: