Reactjs 使用挂钩获取无状态组件中的子状态 自述：

嗨！我不熟悉使用React，甚至更不熟悉使用挂钩，所以如果我的措辞不正确，请纠正我。事实上，我甚至在努力用谷歌搜索我的问题/为这篇文章找到一个标题——我怎样才能最好地用文字表达这个问题

---

问题: 我有一个根组件，其中包含一个处于其状态的表，我正在使用

materialui

和

react csv

创建一个带有保存按钮的导航栏，该按钮可以保存该表。材料UI使用挂钩；我知道如果我的NavBar组件是有状态的，我可以编写

data={this.props.table}

来获取该表，但我想知道在当前框架下如何下载该表？可能吗

代码笔：

根组件：

从“React”导入React；
从“react dom”导入react dom；
从“/NavBar”导入导航栏；
导入“/styles.css”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
桌子：“这是一张桌子”
};
}
render（）{
返回(
{this.state.table}
);
}
}
render（，document.getElementById（“根”））；

导航栏： [我尽量简化代码！]

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>
  );
}

从“React”导入React；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/IconButton”导入图标按钮；
从“@material ui/core/Menu”导入菜单；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/core/ListItemText”导入ListItemText；
从“@material ui/icons/Save”导入SaveIcon；
从“@material ui/core/Tooltip”导入工具提示；
从“react csv”导入{CSVLink}；
const styled菜单=带样式({
论文：{
边框：“1px实心#d3d45”
}
})（道具=>(
));
const StyledMenuItem=带有样式（主题=>({
根目录：{
“&：焦点”：{
背景色：theme.palete.primary.main，
“&.muilistitemcon根，&.MuiListItemText主”：{
颜色：theme.palette.common.white
}
}
}
}))（MenuItem）；
导出默认函数PrimarySearchAppBar（）{
常量[anchorEl，setAnchorEl]=React.useState（null）；
const handleClick=事件=>{
Setancorel（事件当前目标）；
};
常量handleClose=（）=>{
setAnchorEl（空）；
};
返回(
{/*在有状态组件中，我可以将this.props.table放在这里，
但这如何转化为无状态组件？*/}
);
}

谢谢你的建议/帮助

<NavBar table={this.state.table}/>


export default function PrimarySearchAppBar({table}) {
    <CSVLink data={table}>

}

导出默认函数PrimarySearchAppBar（{table}）{
}

<NavBar table={this.state.table}/>


export default function PrimarySearchAppBar({table}) {
    <CSVLink data={table}>

}