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

【问题标题】：Hide sub-component in components generated with map() in React在 React 中使用 map() 生成的组件中隐藏子组件
【发布时间】：2019-11-24 13:05:27
【问题描述】：

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

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

【问题讨论】：

是否有一个父组件包含所有Task 组件？（我假设您发布的代码来自Task 组件。）如果是这样，我们可以看到吗？
更新了问题，是的，它来自任务组件。任务的父级是 Day 组件，因为任务被排序到一周中的每一天。
因此，当单击来自Day 组件的Task 时，您是否希望所有其他Task 组件隐藏TaskMenu？我理解正确吗？
是的。你确实这样做了。

标签： reactjs

【解决方案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>
    );
}

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

【讨论】：