时间戳

首页 > 解决方案 > 在辅助函数中使用 Material-UI 的 useStyle 或使辅助函数表现得像函数组件

reactjs - 在辅助函数中使用 Material-UI 的 useStyle 或使辅助函数表现得像函数组件

问题描述

Line 20:21:  React Hook "useStyles" is called in function "renderActions" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks

我收到以下错误，但我不确定我为什么会收到它。renderAction既然我们在渲染jsx，那不是函数组件吗？那么我们能做些什么让它表现得像一个函数组件呢？我问是因为我想将辅助函数用作函数组件，这样我就可以使用 Material-UIuseStyle而不是使用样式属性并避免不必要的代码重复。

const useStyles = makeStyles(theme => ({
  button: {
    backgroundColor: 'red',
    "&:hover": {
      backgroundColor: 'red'
    }
  },
  modal: {
    backgroundColor: 'white'
  }
}));

const renderActions = (deleteVideo, id) => {
  const classes = useStyles();
  return (
    <React.Fragment>
      <Button onClick={() => deleteVideo(id)} className={classes.button}>Delete</Button>
    </React.Fragment>
  );
}


const Delete = (props) => {
  const {deleteVideo, id } = props;
  return (
    <Modal 
      className={classes.modal}
      actions={renderActions(deleteVideo, id)}
    />
  )
}

有没有更好的方法来做我想做的事？

标签： reactjsreact-functional-component

解决方案

您未能将 renderAction 函数的“R”大写。这就是您收到此错误的原因。所有 react Component 函数都以大写字母开头。让它像这样：

const RenderActions = (props) => {   const classes = useStyles();   return (
    <React.Fragment>
      <Button
        onClick={() => props.deleteVideo(props.id)}
        className={classes.button}
      >
        Delete
      </Button>
    </React.Fragment>   ); };

在您的删除功能中，您未能定义样式，因此您遇到了另一个错误。添加样式。

const Delete = (props) => {
  const { deleteVideo, id } = props;
  const classes = useStyles();
  return (
    <Modal className={classes.modal} actions={RenderActions(deleteVideo, id)} />
  );
};

推荐阅读