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

Question

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-UI 的 useStyle 而不是使用样式属性并避免不必要的代码重复。

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

是否有更好的方法来做我想做的事情？

Answer 1

您未能将 renderAction 函数的 'R' 大写。这就是您收到此错误的原因。所有 React 组件函数都以大写字母开头。像这样：

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

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

Using Material-UI's useStyle in helper functions or making helper functions behave like functional components

reactjs

react-functional-component