使用 Material-ui 列表在 Drawer 中渲染组件答案

【问题标题】：Render component in Drawer with Material-ui Lists使用 Material-ui 列表在 Drawer 中渲染组件
【发布时间】：2017-12-07 20:00:51
【问题描述】：

这感觉在 Docs 中应该是不言自明的，但是他们将 List 代码的关键部分抽象到另一个文件中并且不显示它。所以，我要问你们好人。

我想做一些非常简单的事情：使用带有 Material-ui（测试版）的基于列表的侧边栏在抽屉中呈现组件。我有列表设置，但我不知道如何使 ListItems 链接到组件并执行渲染。这是我的代码：

class DashboardScreen extends Component {
constructor(props) {
    super(props);
}

render() {
    return (
        <div className={this.props.classes.container}>
            <Appbar pagetitle="Dashboard" />
            <div className={this.props.classes.appFrame}>
                <Drawer
                    type="permanent"
                    classes={{
                        paper: this.props.classes.drawerPaper,
                    }}
                    anchor="left">
                    <div className={this.props.classes.drawerHeader} />
                    <List>
                        <ListItem button>
                            <ListItemIcon>
                                <AssessmentIcon />
                            </ListItemIcon>
                            <ListItemText primary="Analytics"/>
                        </ListItem> 
                        <ListItem button>
                            <ListItemIcon>
                                <ImportContactsIcon />
                            </ListItemIcon>
                            <ListItemText primary="Create Investigation"/>
                        </ListItem> 
                        <ListItem button>
                            <ListItemIcon>
                                <AssignmentIcon />
                            </ListItemIcon>
                            <ListItemText primary="Create Survey"/>
                        </ListItem> 
                        <ListItem button>
                            <ListItemIcon>
                                <AssignmentTurnedInIcon />
                            </ListItemIcon>
                            <ListItemText primary="Create Response"/>
                        </ListItem> 
                        <ListItem button>
                            <ListItemIcon>
                                <SettingsIcon />
                            </ListItemIcon>
                            <ListItemText primary="Settings"/>
                        </ListItem> 
                    </List>
                </Drawer>
                <main className={this.props.classes.content}>
                    Testing Stuff!
                </main>
            </div>
        </div>
    )
}
}

我正在渲染的只是另一个名为“分析”的单独组件。它没有什么特别之处。如何获取第一个 ListItem，文本 =“Analytics”，渲染所述组件 <Analytics />？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

ListItem 将有一个onClick 属性，它通过该属性传播到相应的子组件。因此，如果您正在搜索接收每个 ListItem 的点击，您可以简单地执行以下操作：

<ListItem button onClick={() => alert("Hey buddy this will alert when clicked.")}>
    <ListItemIcon>
          <AssessmentIcon />
    </ListItemIcon>
    <Analytics />
</ListItem>
<ListItem button onClick={() => alert("This is a click on a different item.")}>
    <ListItemIcon>
          <ImportContactsIcon />
    </ListItemIcon>
    <Analytics />
</ListItem>

在ListItem API page 的 props 部分底部描述了 props 向下传播到适当区域的过程。

【讨论】：

非常有用。非常感谢。我认为对我来说正确的调用是使用组件道具，然后是链接，但我不确定。知道如何让链接在抽屉中呈现吗？

【解决方案2】：

解决了！

这是我的代码：

class DashboardScreen extends Component {
constructor(props) {
    super(props);
}

render() {
    return (
        <div className={this.props.classes.container}>
            <Appbar pagetitle="Dashboard" />
            <div className={this.props.classes.appFrame}>
                <Drawer
                    type="permanent"
                    classes={{
                        paper: this.props.classes.drawerPaper,
                    }}
                    anchor="left">
                    <div className={this.props.classes.drawerHeader} />
                    <List>
                        <ListItem button component={({...props}) => <Link to={this.props.match.url + '/analytics'} {...props} />}>
                            <ListItemIcon>
                                <AssessmentIcon />
                            </ListItemIcon>
                            <ListItemText primary="Analytics"/>
                        </ListItem> 
                        <ListItem button>
                            <ListItemIcon>
                                <ImportContactsIcon />
                            </ListItemIcon>
                            <ListItemText primary="Create Investigation"/>
                        </ListItem> 
                        <ListItem button>
                            <ListItemIcon>
                                <AssignmentIcon />
                            </ListItemIcon>
                            <ListItemText primary="Create Survey"/>
                        </ListItem> 
                        <ListItem button>
                            <ListItemIcon>
                                <AssignmentTurnedInIcon />
                            </ListItemIcon>
                            <ListItemText primary="Create Response"/>
                        </ListItem> 
                        <ListItem button>
                            <ListItemIcon>
                                <SettingsIcon />
                            </ListItemIcon>
                            <ListItemText primary="Settings"/>
                        </ListItem> 
                    </List>
                </Drawer>
                <main className={this.props.classes.content}>
                    <Route path={this.props.match.url + "/analytics"} component={Analytics}/>
                </main>
            </div>
        </div>
    )
}
}

本质上，您需要将组件的 Route 包含在 Drawer 的主要部分中。然后，您需要通过包装在 ListItem 上的组件属性中的组件链接到该路由。

希望这对某人有所帮助！

【讨论】：

【解决方案3】：

您是否尝试使用自定义组件简单地更改 ListItemText？

<ListItem button>
    <ListItemIcon>
          <AssessmentIcon />
    </ListItemIcon>
    <Analytics />
</ListItem>

【讨论】：

我没有。虽然我承认，但我对此持怀疑态度 - ListItemText 应该在那里，以显示与 Button（ListItem）关联的文本，就像按钮将具有与之关联的文本一样。我要问的是更类似于按钮如何具有 onClick 方法，可能会呈现组件，或者类似的东西我不确定。