反應遞歸函數以渲染組件

Question

我一直在嘗試在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鍵中，並在下拉菜單下將其內部的兩個對象都呈現。 目前，下拉菜單內容未呈現。

Answer 1

您不會在此地圖{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>