Question

这似乎是一个常见问题，但我无法解决。我正在使用React，TypeScript和Material-UI。如果我使用的是类（这就是TS的意思），那么所有的类将无法正常工作。这是我无法正常工作的最小示例：文件RTaskForm.tsx

import * as React from "react"
import {Task, TaskProcessor} from "./Task"
import { makeStyles, Grid, TextField } from '@material-ui/core'


const styles = makeStyles(theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
  },
  dense: {
    marginTop: theme.spacing(2),
  },
  menu: {
    width: 200,
  },
}));


export class RTaskForm extends React.Component<
    {prefix: string},
    {task: Task}> {

    constructor(props: any) {
        super(props)
        this.state = {
          task: TaskProcessor.tasks(false)[1]
        }
    }

    render() {
        const classes = styles()
        return (
            <form className={classes.container} noValidate autoComplete="off">
                <Grid container spacing={2}>
                    <Grid item xs={12} sm={6}>
                        <TextField
                            required
                            id="filled-required"
                            label="Required"
                            defaultValue="Hello World"
                            className={classes.textField}
                            margin="normal"
                            variant="filled"
                        />
                    </Grid>
                </Grid>
            </form>
        )
    }
}

文件index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { RTaskForm } from "./RTaskForm" 

ReactDOM.render(<div id="root">
        <RTaskForm prefix="Hi"/>
    </div>, document.getElementById('root'));

文件Task.ts（只有两个类可以编译）

export class Task extends Map<string, string> {
    static emptyTask() {
        return new Task()
    }
}


export class TaskProcessor {
    static tasks(b: boolean): Task[] {
        return [Task.emptyTask()]
    }
}

我知道我必须使用withStyles而不是makeStyles，但是我必须为主题提供一个函数参数，不接受null。

很高兴获得一些帮助，谢谢。

编辑：在浏览器中，我收到此错误消息（标为第36行）：

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)

2. You might be breaking the Rules of Hooks

3. You might have more than one copy of React in the same app
See "cannot write the link here" for tips about how to debug and fix this problem.

3 stack frames were collapsed.

render

src/RTaskForm.tsx:36

  33 |  }

  34 | 

  35 |  render() {

 36 |      const classes = styles()

     | ^  37 |      return (

  38 |          <form className={classes.container} noValidate autoComplete="off">

  39 |              <Grid container spacing={2}>

View compiled

无效的挂接呼叫

0 个答案: