javascript – 使用React如何从容器组件切换嵌套组件的可见性？

目标

我试图基于Google Material Design layout模仿React和Redux中的列表控件组件.

列表控件将允许您创建,重命名和删除列表中的项目,而无需导航到新页面.

重命名和删除列表项的操作将显示在通过单击每个列表项上的链接触发的弹出菜单组件中.

当前组件结构

我有一个顶级容器组件ListItemPage链接到Redux我用来维护列表的状态,然后我将更改推送到商店.

在ListItemPage中,我正在呈现项目列表,每个项目都有一个唯一的菜单组件

ListItemPage组件

class ListItemPage extends Component {
    constructor(props,context) {
        super(props,context);
    }

    onMenuClick(){}
    onRename(){}
    onDelete(){}

    render () {
        const { listItems } = this.props;

        return(
            etoProps(state,ownProps){
    return {
        listItems: state.listItems
    }
}

function mapdispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(listItemActions,dispatch)
  };
}

export default connect(mapStatetoProps,mapdispatchToProps)(ListItemPage);

菜单组件

const Menu = (showMenu,onDelete,onRename) => {
    if(showMenu) {
        return(
            

Redux商店数据结构

let listItems = [
    { id: 1,title: 'Item A' },{ id: 2,title: 'Item B' },{ id: 3,title: 'Item C' }
];

问题

我无法弄清楚我如何基于onClickEvent列表项显示和隐藏独特的菜单组件.

我想到了一些如何传递一个bool来获取showMenu的那个unqiue项目,但我不确定在哪里为每个项目定义这个,或者即使这是最好的方法.

我知道我可以使用Refs来达到这个目的但我不希望建议只使用Refs作为最后的手段.

最佳答案

伟大的第一篇文章很好地呼吁限制使用refs.

一种方法可能是在ListItemPage组件中保留当前显示哪个菜单的状态.

constructor(props,context) {
    super(props,context);
    this.state = { showMenu: null };
}

然后,在onMenuClick函数中,接收项目的id以显示菜单,并分配给state.

onMenuClick(id) {
  this.setState({ showMenu: id });
}

这将按如下方式传递到您的菜单.

showMenu={this.state.showMenu === listItem.id}

关闭菜单只需要将this.state.showMenu的值重置为null.

这假设在给定时间只显示一个菜单.如果那不是真的,请告诉我,我会更新.