React 递归函数以渲染组件

Question

我一直在尝试在 react 中的自定义导航栏组件中呈现 react-bootstrap 组件。我设置了一个递归函数，它应该在反应渲染中运行并向下钻取，直到 NavDropDown 组件下没有导航项组件。目前，当任何向下钻取的尝试返回为未定义并且不显示在导航栏中时。

我尝试过以多种方式重新格式化我的 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 函数中的下拉列表时，它应该再次运行该函数，向下迭代到下拉对象的内容键，并在下拉列表下呈现其中的两个对象。目前下拉内容不呈现。

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>