Question

我是 React 的新手并编写了下面的代码我试图插入 TabPanel 但出现错误的地方未捕获的类型错误：TabPanel 没有提供 TabContext (TabPanel.js:26) 在 renderWithHooks (react-dom.development.js:14803) 如何调整此错误？

import React, {useState, useEffect} from "react";
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import MenuItem from '@material-ui/core/MenuItem';
import Fetch from "../../../services/Fetch";
import InputDatePicker from "../../../components/InputDatepicker";
import CurrencyTextField from '@unicef/material-ui-currency-textfield';
import bridge from "./bridge";
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import TabPanel from '@material-ui/lab/TabPanel';

export default (props)=>{

const [state, setState] = useState(bridge.getForm(props.idUsidUser));
const [value, setValue] = useState(0);

useEffect(()=>{
    setTimeout(()=>{
        var elements = document.querySelectorAll("div[min='0']");
        elements.forEach((element) => {
            if(element.children.length > 0){
                element.children[0].min = 0;
            }
        });
    }, 300);
}, []);

bridge.setForm = setState;

const closeModal = (event) =>{
    document.querySelector("#form").removeAttribute("style");
    document.querySelector("html").removeAttribute("style");
    document.querySelector(".modal-overlay").removeAttribute("style");
}

const onInputChange = (event) => {
    setState({
        ...state,
        [event.target.name]: event.target.value
    });
}

const handleChange = (event, newValue) => {
    setValue(newValue);
};

function a11yProps(index) {
    return {
      id: `simple-tab-${index}`,
      'aria-controls': `simple-tabpanel-${index}`,
    };
  }

return (
    <form onSubmit={onSubmit}>
        <h3 className="featured">Create</h3>
        <Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
          <Tab label="Tab 1" {...a11yProps(0)} />
            <Tab label="Tab 2" {...a11yProps(1)} />
            <Tab label="Tab 3" {...a11yProps(2)} />
            <Tab label="Tab 4" {...a11yProps(3)} />
            <Tab label="Tab 5" {...a11yProps(4)} />
        </Tabs>
        <TabPanel value={value} index={0}>
            Item One
        </TabPanel>
    </form>
);
}

我不知道我做错了什么让 React 承认错误。在这种情况下该怎么办？嗯，我遵循了我在框架文档中研究的基本原则

反应材料 TabPanel

0 个答案: