Question

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

我希望做一些非常简单的事情：使用带有Material-ui（beta版）的基于列表的侧边栏来渲染抽屉中的组件。我有列表设置，但我无法弄清楚如何使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>
    )
}
}

我所呈现的只是另一个名为＆＃34; Analytics＆＃34;的独立组件。它没什么特别之处。如何获取第一个ListItem，使用text =＆＃34; Analytics＆＃34;，渲染所述组件<Analytics />？

Answer 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上道具部分的底部描述了将道具传播到适当的区域。

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

基本上，您需要在抽屉的主要部分中包含组件的路径。然后，您需要通过ListItem上的组件prop中包含的组件链接到该路由。

希望这有助于某人！

Answer 3

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

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

使用Material-ui列表在抽屉中渲染组件

3 个答案: