ПРОЧТИ МЕНЯ:

Привет! Я новичок в использовании React и даже новичок в использовании хуков, поэтому, пожалуйста, поправьте меня, если мое словоблудие неверно. Фактически, я изо всех сил пытался даже найти в Google свою проблему / придумать название для этого сообщения - как бы мне лучше всего выразить эту проблему словами?

Вопрос:

У меня есть корневой компонент, который содержит таблицу в своем состоянии, и я использую Material UI и react-csv для создания NavBar с кнопкой сохранения, которая может сохранить таблицу. Материальный интерфейс использует хуки; Я знаю, что если бы мой компонент NavBar был с отслеживанием состояния, я мог бы написать data={this.props.table}, чтобы получить таблицу, но мне было интересно, как мне загрузить таблицу при текущей структуре? Является ли это возможным?

CodePen: https://codesandbox.io/embed/old-dust-88mrp

Корневой компонент:

import React from "react";
import ReactDOM from "react-dom";

import NavBar from "./NavBar";
import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      table: "this is a table"
    };
  }

  render() {
    return (
      <div>
        <NavBar />
        <div>{this.state.table}</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

NavBar:

[Я старался максимально упростить код!]

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import IconButton from "@material-ui/core/IconButton";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import ListItemText from "@material-ui/core/ListItemText";
import SaveIcon from "@material-ui/icons/Save";
import Tooltip from "@material-ui/core/Tooltip";
import { CSVLink } from "react-csv";

const StyledMenu = withStyles({
  paper: {
    border: "1px solid #d3d4d5"
  }
})(props => (
  <Menu
    elevation={0}
    getContentAnchorEl={null}
    anchorOrigin={{
      vertical: "bottom",
      horizontal: "center"
    }}
    transformOrigin={{
      vertical: "top",
      horizontal: "center"
    }}
    {...props}
  />
));

const StyledMenuItem = withStyles(theme => ({
  root: {
    "&:focus": {
      backgroundColor: theme.palette.primary.main,
      "& .MuiListItemIcon-root, & .MuiListItemText-primary": {
        color: theme.palette.common.white
      }
    }
  }
}))(MenuItem);

export default function PrimarySearchAppBar() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <AppBar position="static">
        <Toolbar>
          <div>
            <Tooltip disableFocusListener title="Save">
              <IconButton size="medium" onClick={handleClick} color="inherit">
                <SaveIcon />
              </IconButton>
            </Tooltip>
            <StyledMenu
              id="customized-menu"
              anchorEl={anchorEl}
              keepMounted
              open={Boolean(anchorEl)}
              onClose={handleClose}
            >
              <StyledMenuItem>
                {/* In stateful components I could put this.props.table here, 
          but how does this translate to a stateless component? */}
                <CSVLink data={"this is a test"}>
                  <ListItemText primary="Data" />
                </CSVLink>
              </StyledMenuItem>
            </StyledMenu>
          </div>
        </Toolbar>
      </AppBar>
    </div>
  );
}

Спасибо за любой совет / помощь !!