Question

我试图在无状态组件中调用函数ButtonAppBar，但是TS编译器给我这个错误：'{' expected。我不确定是否应该将其传递给我的New Header组件还是应该给它一个类型。

这是我的组成部分

import * as React from "react";
import { withStyles, createStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";

const styles: any = createStyles({
  root: {
    flexGrow: 1
  },
  header: {
    backgroundColor: "#007"
  },
  grow: {
    flexGrow: 1
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20
  }
});

const ButtonAppBar = (styles) => {
  const classes = styles;
  return (
    <div className={classes.root}>
      <AppBar position="static" className={classes.header}>
        <Toolbar>
          <IconButton
            className={classes.menuButton}
            color="inherit"
            aria-label="Menu"
          >
            <MenuIcon />
          </IconButton>
          <Button color="inherit">Home</Button>
          <Button color="inherit">Help</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

const NewHeader: React.StatelessComponent<props> = ({}) => {
  return (
    {ButtonAppBar()}
  );
}

export default withStyles(styles, NewHeader);

Answer 1

您的代码未正确解析。

const NewHeader: React.StatelessComponent<props> = ({}) => ButtonAppBar();

要么：

const NewHeader: React.StatelessComponent<props> = ({}) => {
  return ButtonAppBar();
}

调用React无状态组件内部的函数

1 个答案: