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

Question

目标

我正在尝试根据 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(
            <div>
                <ul>
                    {
                        listItems.map(listItem =>
                            <li>
                                <a href={`/items/${listItem.id}`}>
                                    {listItem.title}
                                </a>
                                <a href="#" onClick={onMenuClick}>
                                    <i className="material-icons">more_vert</i>
                                </a>
                                <Menu
                                    showMenu={showMenu}
                                    onRename={onRename}
                                    onDelete={onDelete}/>
                            </li>
                        )
                    }
                <ul>
                <a href="#" onClick={null}>
                    <i className="material-icons">add</i>
                </a>
            </div>
        );
    }
}

function mapStateToProps(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(
            <nav>
                <a href="#" onDelete={onDelete}>Delete</a>
                <a href="#" onRename={onRename}>Rename</a>
            </nav>
        );
    }

    return null;
}

export default Menu;

Redux Store 数据结构

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

问题

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

我正在考虑如何为 showMenu 的那个不明确的项目传递一个 bool 值，但我不确定在哪里为每个项目定义它，或者即使这是最好的方法。

我知道我可以使用 Refs 来实现这一点，但我不想这样做，因为建议仅将 Refs 作为最后的手段。

Answer 1

很棒的第一篇文章!也呼吁限制 refs 的使用。

一种方法是在您的 ListItemPage 组件中保留当前应显示哪个菜单的某些状态。

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

然后，在您的 onMenuClick 函数中，接收要为其显示菜单的项目的 ID，并分配给状态。

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

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

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

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

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