时间戳

首页 > 解决方案 > 在 React 中使用 map() 生成的组件中隐藏子组件

reactjs - 在 React 中使用 map() 生成的组件中隐藏子组件

问题描述

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

setState({displayTaskMenu: true})

叫做，

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

使用 React 执行此操作的正确方法是什么？

这是 Task 组件的渲染方法：

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

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

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

            </div>
        </div>
    );
}

任务按天排序，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}/>
                )}
        </div>
    );
}

标签： reactjs

解决方案

由于只有一个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。

推荐阅读