目标

我试图基于Google Material Design布局模仿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>
                        )
                    } …