Javascript 在我的一个组件中使用钩子的MaterialUI实现calander

一般来说，我对React和JavaScript都是新手，并尝试在web应用程序上使用。我想实现一个从Material UI中找到的calandar选择器

在《开始指南》中，它使用挂钩制作日历，但似乎我无法在组件中使用挂钩

我试着把函数移出我的类并在类中调用它，但是我得到了同样的错误，所以我猜这是不行的

class GameList extends Component {
  state = {};

  render() {
    const { classes } = this.props;
    return (
      <div id="gameList">
        {BasicDatePicker()}
      </div>
    );
  }
}

export function BasicDatePicker(){
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker
        label="Basic example"
        value={selectedDate}
        onChange={handleDateChange}
        animateYearScrolling
      />
      </MuiPickersUtilsProvider>
  );
}

export default (GameList);

类游戏列表扩展组件{
状态={}；
render（）{
const{classes}=this.props；
返回(
{BasicDatePicker（）}
);
}
}
导出函数BasicDatePicker（）{
const[selectedDate，handleDateChange]=useState（新日期（））；
返回(
);
}
导出默认值（游戏列表）；

我收到的错误如下： “钩子调用无效。钩子只能在函数组件的主体内部调用。发生这种情况的原因如下： 1.React和渲染器的版本可能不匹配（例如React DOM） 2.你可能违反了钩子的规则 3.同一应用程序中可能有多份React“

---

据我所知，hook-im-breaking的规则是在类中使用它，但我没有看到在我的组件中使用日历的其他方法。

使用JSX标记

而不是像这样执行BasicDatePicker组件
BasicDatePicker（）

函数基本数据选择器（）{
const[selectedDate，handleDateChange]=useState（新日期（））；
返回(
);
}
类GameList扩展组件{
状态={}；
render（）{
const{classes}=this.props；
返回(
);
}
}
导出默认值（游戏列表）；
有什么错误？@Rastalamm哦，我的错误，当然，我已经将它添加到原始帖子中了。谢谢。你应该像这样渲染
基本数据采集器
！非常感谢。我可以问一下，以这种方式调用函数是如何使它工作的吗？我猜我缺少了一些东西。@Jahson，这是呈现组件（基于类和函数）的标准方法。我真的不知道“引擎盖下”发生了什么，但如果你想用钩子，这是唯一的办法。几乎每个react教程（包括）都使用这种语法。
function BasicDatePicker(){
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker
        label="Basic example"
        value={selectedDate}
        onChange={handleDateChange}
        animateYearScrolling
      />
      </MuiPickersUtilsProvider>
  );
}


class GameList extends Component {
  state = {};

  render() {
    const { classes } = this.props;
    return (
      <div id="gameList">
        <BasicDatePicker />
      </div>
    );
  }
}


export default (GameList);