Question

我正在尝试从JSON生成导航抽屉，并且仅使用组件就可以使所有工作正常进行，但是我正在重构为可以提高性能的功能（并更多地了解React和Javascript）。如果我将DrawerLink保留为单独的组件，那么一切都会按预期工作，但是如果我尝试从PopulateDrawer（父组件）向下传递renderLink，它会中断并抛出错误，即渲染未返回任何内容。

据我所知，我正在正确地按照此处https://reactjs.org/docs/handling-events.html和此处https://material-ui.com/demos/buttons/的说明进行操作，但这是行不通的。是因为我正在通过组件而不是函数吗？这是高阶组件起作用的地方吗？我见过他们提到过，但还不了解如何正确使用它们。

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;

编辑，添加JSON blob代码时针对：

"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

您确定display既不是null也不是undefined？ display似乎是childData的一个属性。尝试记录display。

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

1 个答案: