Как поместить ящик под заголовком React-JS

#javascript #node.js #reactjs

Вопрос:

Я новичок в react, и в моем коде есть useStyles для изменения стиля ящика

 const useStyles = makeStyles((theme) => ({
   drawer: {
       marginTop: 56,
   }
}));
class PageMenu extends React.Component {
GetMenuItems() {
var classes = useStyle();
<div>
   <Drawer
      open={this.props.DrawerOpen}
      anchor="right"
      variant="persistent"
      onClose={this.fixthew}
      classes = {classes.drawer}
   >
      ---some element------
   </Drawer>
<div>
}
}
render() {
  return(
     <div>
        {GetMenuItems}
     </div>
  )
}

проблема есть ReferenceError: useStyle is not defined и GetMenuItems должна быть до рендеринга

1. Вы определили useStyles его сверху, но используете его как useStyle . Буква «s» отсутствует, так почему ошибка ссылки. И то, как вы определили GetMenuItems , и то, как вы ссылаетесь на рендеринг, неверно. Если вы хотите использовать его как свойство класса PageMenu, тогда имя должно быть getMenuItems . Либо свяжите это с классом PageMenu, затем используйте его как {this.GetMenuItems()}, либо создайте GetMenuItems как отдельный функциональный компонент, затем используйте его как <GetMenuItems />

2. вы не дали отзыв о том, что вы принимаете какой-либо ответ

Ответ №1:

Используйте withStyles вместо makeStyles для компонентов класса.

1. это моя главная проблема var classes = useStyle(); , которую я изменил на makeStyles to withStyles , но она все еще не определена

2. вы должны импортировать его import { makeStyles } from '@material-ui/core/styles';

Ответ №2:

много ошибок:

Вы используете useStyles перехват в компоненте класса (перехваты предназначены только для функциональных компонентов)..
Вы определяете компонент как один из методов класса … вы не должны этого делать..
Вы передаете класс в classes prop, а не в className prop

вместо этого используйте функциональный компонент, например:

 function MenuItems(){
    var classes = useStyle();
    return <div>
       <Drawer
          open={this.props.DrawerOpen}
          anchor="right"
          variant="persistent"
          onClose={this.fixthew}
          className = {classes.drawer}
       >
          ---some element------
       </Drawer>
    <div>
}


function PageMenu(){
    return(
         <div>
            <MenuItems/>
         </div>
    )
}

если вы новичок, я могу посоветовать вам использовать функциональный компонент с хуками и изучить различия…
кроме того, Matirial-Ui — это сложная библиотека, и вам лучше изучить настройки в этой библиотеке и способы, которыми они предлагают стилизовать компоненты… (хотя их много ..)

1. как я должен изменить стиль пользовательского интерфейса материала в компоненте класса?

2. С помощью стилей, как сказал Назир … вам просто нужно заглянуть в документы и посмотреть, как это сделать правильно… в любом случае я отправил вам идентификатор ошибок, чтобы он мог вам помочь…