为什么渲染未返回任何内容？

Question

I am trying to generate my navigation drawer from JSON and have got everything working using just components but I am refactoring to functions where I can for performance (and to learn more about React and Javascript). If I leave DrawerLink as a seperate component then everything works as expected, but if I try to pass renderLink down from PopulateDrawer (parent component) it breaks and throws the error that nothing was returned from render.

As far as I can tell I am following the instructions from here https://reactjs.org/docs/handling-events.html and here https://material-ui.com/demos/buttons/ correctly but it doesn't work. Is it because I am passing through a component rather than a function? Is this where Higher Order Components come into play? I've seen them mentioned but haven't understood how to use them properly yet.

import React from 'react';
import Divider from '@material-ui/core/Divider';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import { Link } from 'react-router-dom';
import { List, Collapse } from '@material-ui/core';

class DrawerLink extends React.Component {
  renderLink = itemProps => <Link to={this.props.link} {...itemProps} />;

  render() {
    const { display } = this.props;

    return (
        <ListItem button component={this.renderLink}>
            <ListItemText primary={display} />
        </ListItem>
    );
  }
}

function ProcessJSON(props) {
  const {
    data, 
    groupDrawers,
    updateGroupDrawer,
    renderLink
  } = props;

  return (
    Object.keys(data).map(key => {
      if (data[key] === "divider") {
        return (
          <Divider key={key} />
        )
      }
      else {
        let childData = data[key];
        let listDetected = false;

        Object.keys(childData).map(key => {
          if (key == "list") {
            listDetected = true;
          }
        })

        if (listDetected === false) {
          return (
            // <DrawerLink
            //   key={childData.display}
            //   display={childData.display} 
            //   link={childData.link}
            //   renderLink={renderLink} />

            <ListItem key={childData.display} button component={(e) => renderLink(childData.link)}>
              <ListItemText primary={childData.display} />
            </ListItem>
          )
        }
        else {
          return (
            <React.Fragment key={childData.display}>
              <ListItem button onClick={() => updateGroupDrawer(childData.display, !groupDrawers[childData.display])}>
                <ListItemText primary={childData.display} />
                {groupDrawers[childData.display] ? <ExpandLess /> : <ExpandMore />}
              </ListItem>
              <Collapse 
                in={groupDrawers[childData.display]} 
                timeout="auto" unmountOnExit >
                <List component="div">
                  <ProcessJSON 
                    data={childData.list} 
                    groupDrawers={groupDrawers} 
                    updateGroupDrawer={updateGroupDrawer} />
                </List>
              </Collapse>
            </React.Fragment>
          )
        }
      }
    })
  )
}

class PopulateDrawer extends React.Component {
  componentDidMount() {
    const groupDrawers = {...this.state.groupDrawers, ...this.props.groupDrawers};
    this.setState({ groupDrawers });
  };

  state = {
    groupDrawers: {}
  };

  updateGroupDrawer = (display, open) => {
    const groupDrawers = {...this.state.groupDrawers};
    groupDrawers[display] = open;
    this.setState({ groupDrawers });
  };

  renderLink = (link) => {
    <Link to={link} />
  };

  render() {
    const {
      data,
    } = this.props;

    return (
      <ProcessJSON 
        data={data} 
        groupDrawers={this.state.groupDrawers} 
        updateGroupDrawer={this.updateGroupDrawer} 
        renderLink={this.renderLink}/>
    )
  }
}

export default PopulateDrawer;

edit, adding JSON blob code is running against:

"data": {
        "nav1": {
          "display": "Home",
          "link": "/"
        },
        "nav2": {
          "display": "Templates",
          "link": "templates"
        },
        "nav3": "divider",
        "nav4": {
          "display": "Test",
          "list": {
            "nav1": {
              "display": "Home",
              "link": "/"
            },
            "nav2": {
              "display": "Templates",
              "link": "templates"
            }
          }

Answer 1

Are you sure display is neither null or undefined ? It looks as though display is a property off of childData . Try logging display .