Question

您好，我正在尝试将样式加载到ui内容中，但是我在这样做时遇到了困难

const useStyles = makeStyles(loginPage)
const classes = useStyles();
const renderTextField = ({
  label,
  input,
  meta: { touched, invalid, error },
  ...custom
}) => (

  <TextField
    label={label}
    placeholder={label}
    variant="outlined"
    InputLabelProps={{
      classes: {
        root: classes.label,
        focused: classes.focusedLabel,
        error: classes.erroredLabel
      }
    }}
    InputProps={{
      classes: {
        root: classes.cssOutlinedInput,
        focused: classes.cssFocused,
        notchedOutline: classes.notchedOutline,
      },
      startAdornment: (
        <InputAdornment position="start">
          <PersonSharpIcon style={{ fontSize: 25  , color: 'rgba(20, 176, 12,0.9)' }} />
        </InputAdornment>
      )
    }}
    error={touched && invalid}
    helperText={touched && error}
    {...input}
    {...custom}
  />
)

错误：

错误：无效的挂接调用。挂钩只能在身体内部使用功能组件。

有人可以帮我解决这个问题吗？

Answer 1

这与错误消息中所说的完全一样。您需要将钩子移到功能组件的主体内部。

React将以'use'开头的每个函数都视为一个钩子。因此，在您的情况下为useStyles()。 React还期望只能从函数组件主体内部以及从其根目录调用此类函数（因此，将其嵌套在循环或条件语句中是一个很大的问题-您可以阅读here）。您的功能组件是renderTextField，因此您可以看到您正在useStyles()的主体外部调用renderTextField。

构建类似这样的内容应该会有所帮助：

const useStyles = makeStyles(loginPage);
const RenderTextField = ({
    label,
    input,
    meta: { touched, invalid, error },
    ...custom
}) => {
    const classes = useStyles(); // <-- Move it here
    return (
        <TextField
            label={label}
            ...
        >
            ...
        </TextField>
    );
}

反应挂钩无效的呼叫挂钩

1 个答案: