[英]React Recursive Function to Render Components
我一直在尝试在react中的自定义navBar组件中呈现react-bootstrap组件。 我设置了一个递归函数,该函数应该在react渲染中运行并向下钻取,直到NavDropDown Components下没有nav Item组件。 当前,当进行任何向下钻取的尝试时,返回的值都是未定义的,并且不会显示在导航栏中。
我尝试了多种方式重新格式化我的React代码,包括/删除方括号,切换到纯文本等。
下面的代码:
navContent = {[
{
type : "link",
target: "/",
content: "Home"
},
{
type: "dropdown",
title: "CLICK ME",
content: [
{type : "item",
target: "/",
content: "home"
},
{type : "item",
target: "/",
content: "home"
}
]
},
{
type: "form",
formType: "text",
placeholder: "search",
className: "",
buttonType: "submit",
buttonContent: "Submit"
},
]}
export default class Navigation extends React.Component {
constructor(props){
super(props);
this.state = {
}
}
getNavItem(navItem){
switch(navItem.type){
case 'link':
return <Nav.Link><Link to={navItem.target}>{navItem.content}</Link></Nav.Link>
case 'dropdown':
return <NavDropdown id="basic-nav-dropdown" title={navItem.title}>
{navItem.content.map(item => {this.getNavItem(item)})}
</NavDropdown>
case 'form':
return <Form inline> <FormControl type={navItem.formType} placeholder={navItem.placeholder} className={navItem.className}/><Button type={navItem.buttonType}>{navItem.buttonContent}</Button></Form>
case 'item':
return <NavDropdown.Item><Link to={navItem.target}>{navItem.content}</Link></NavDropdown.Item>
}
}
render(
){
return(
<Navbar bg="light" expand="lg">
<Link to="/"><Navbar.Brand>Home Placeholder</Navbar.Brand></Link>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
{this.props.navContent.map(navItem => this.getNavItem(navItem))}
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
}
理想情况下,当case开关在getNavItem函数中单击下拉菜单时,它应再次运行该函数,使其向下迭代到下拉菜单对象的content键中,并在下拉菜单下将其内部的两个对象都呈现。 目前,下拉菜单内容未呈现。
您不会在此地图{navItem.content.map(item => {this.getNavItem(item)})}
返回结果。 应该为{navItem.content.map(item => this.getNavItem(item))}
或{navItem.content.map(item => { return this.getNavItem(item)})}
。 参见下面的示例(我用div替换了您的组件,但结构正确):
const navContent = [ { type: "link", target: "/", content: "Home" }, { type: "dropdown", title: "CLICK ME", content: [ { type: "item", target: "/", content: "home" }, { type: "item", target: "/", content: "home" } ] }, { type: "form", formType: "text", placeholder: "search", className: "", buttonType: "submit", buttonContent: "Submit" } ]; class Navigation extends React.Component { constructor(props) { super(props); this.state = {}; } getNavItem(navItem) { const foo = () => 1; switch (navItem.type) { case "link": return ( <div className="Nav.Link"> <div className="Link" to={navItem.target}> {navItem.content} </div> </div> ); case "dropdown": return ( <div className="NavDropdown" id="basic-nav-dropdown" title={navItem.title} > {navItem.content.map((item) => this.getNavItem(item))} </div> ); case "form": return ( <div className="Form" inline> {" "} <div className="FormControl" type={navItem.formType} placeholder={navItem.placeholder} className={navItem.className} /> <div className="Button" type={navItem.buttonType}> {navItem.buttonContent} </div> </div> ); case "item": return ( <div className="NavDropdown.Item"> <div className="Link" to={navItem.target}> {navItem.content} </div> </div> ); } } render() { return ( <div className="Navbar" bg="light" expand="lg"> <div className="Link" to="/"> <div className="Navbar.Brand">Home Placeholder</div> </div> <div className="Navbar.Toggle" aria-controls="basic-navbar-nav" /> <div className="Navbar.Collapse" id="basic-navbar-nav"> <div className="Navbar.Collapse mr-auto"> {this.props.navContent.map(this.getNavItem.bind(this))} </div> </div> </div> ); } } ReactDOM.render( <Navigation navContent={navContent} />, document.getElementById("react") );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <Navigation/> <div id="react"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.