Question

我正在开发待办事项应用程序。单击任务时

setState({displayTaskMenu: true})

被称为

但是我还需要在displayTaskMenu为true的所有其他Task组件上隐藏taskMenu。

使用React做到这一点的正确方法是什么？

这是Task组件的渲染方法：

render() {
    let { task } = this.props;

    return (
        <div onClick={this.toggleMenu}>
            <div>
                {task.label}

                {this.state.displayTaskMenu && (<TaskMenu />)}

            </div>
        </div>
    );
}

任务按天排序，“天”组件的呈现为：

render() {
    return (
        <div style={this.state.dayStyle}>
            <span style={this.state.dateStyle}>{this.props.date}</span>
            <h1>{this.props.day}</h1>

            {this.props.tasks &&
                this.props.tasks.map(
                    (task, i) => <Task key={i} task={task}/>
                )}
        </div>
    );
}

Answer 1

由于只有一个Task组件应打开其TaskMenu，因此Day组件需要通过使用状态来跟踪它是哪个Task。因此，Day组件应该将自定义的onClick函数传递给每个Task，以更新其状态。

Day组件：

render() {
    return (
        <div style={this.state.dayStyle}>
            <span style={this.state.dateStyle}>{this.props.date}</span>
            <h1>{this.props.day}</h1>

            {this.props.tasks &&
                this.props.tasks.map(
                    (task, i) => <Task 
                                  key={i}
                                  task={task}
                                  displayMenu={this.state.displaying == i}
                                  onClick={ () => this.setState({displaying: i}) }/>
                )}
        </div>
    );
}

Task组件：

render() {
    let { task } = this.props;

    return (
        <div onClick={this.props.onClick}>
            <div>
                {task.label}

                {this.props.displayMenu && (<TaskMenu />)}

            </div>
        </div>
    );
}

使用这种方法，您不再需要toggleMenu组件中的Task函数。

在React中使用map（）生成的组件中隐藏子组件

1 个答案: