Reactjs 使用材质ui列表在抽屉中呈现组件_Reactjs_Material Ui

Reactjs 使用材质ui列表在抽屉中呈现组件

reactjs material-ui

Reactjs 使用材质ui列表在抽屉中呈现组件,reactjs,material-ui,Reactjs,Material Ui,这在文档中感觉应该是不言自明的，但它们将列表代码的关键部分提取到另一个文件中，而不显示它。所以，我只想问你们好朋友我希望做一些非常简单的事情：使用一个基于列表的边栏和MaterialUI（测试版）来呈现抽屉中的组件。我有列表设置，但我不知道如何使ListItems链接到组件并执行渲染。这是我的密码： class DashboardScreen extends Component { constructor(props) { super(props); } render() {

这在文档中感觉应该是不言自明的，但它们将列表代码的关键部分提取到另一个文件中，而不显示它。所以，我只想问你们好朋友

我希望做一些非常简单的事情：使用一个基于列表的边栏和MaterialUI（测试版）来呈现抽屉中的组件。我有列表设置，但我不知道如何使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>
    )
}
}

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

类仪表板屏幕扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
测试东西！
)
}
}

我呈现的只是另一个单独的组件，称为“分析”。这没什么特别的。如何使用text=“Analytics”获取第一个ListItem，呈现所述组件

？

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

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

列表项将有一个

onClick

属性，它将通过该属性传播到相应的子组件。因此，如果您正在搜索每个

列表项的点击次数，您只需执行以下操作：
<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>

alert（“嘿，伙计，点击时会发出警报。”）}>
.
解决了
这是我的密码：
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>
    )
}
}

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

类仪表板屏幕扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
}>
)
}
}

基本上，您需要在抽屉的主要部分中包含组件的路由。然后，您需要通过ListItem上组件道具中包装的组件链接到该路由
希望这对别人有帮助
 我没有。尽管我承认，我对此非常怀疑——ListItemText应该在那里，以显示与按钮（ListItem）关联的文本，就像按钮会有与其关联的文本一样。我想问的更像是一个按钮如何有一个onClick方法，它可能呈现一个组件，或者类似的东西，我不确定。非常有用。多谢各位。我认为对我来说正确的选择是使用组件道具，然后是链接，但我不确定。知道如何在抽屉中渲染链接吗？