Reactjs 将扩展面板功能组件转换为类组件

我是一个比较新的反应。我一直在尝试为下面的accordion扩展面板创建一个功能性格式的类组件。根据类组件更改handleChange事件时遇到问题。我已经尝试了所有可能的方法，但我失败了

 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import ExpansionPanel from '@material-ui/core/ExpansionPanel';
 import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

 const useStyles = makeStyles(theme => ({

 }));

 export default function ControlledExpansionPanels() {


 const classes = useStyles();

 const [expanded, setExpanded] = React.useState(false);


 const handleChange = panel => (event, isExpanded) => {
 setExpanded(isExpanded ? panel : false);
 };


  return (

  <div className={classes.root}>

  <ExpansionPanel expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>

   <ExpansionPanelSummary
      expandIcon={<ExpandMoreIcon />}
      aria-controls="panel1bh-content"
      id="panel1bh-header"
    >


    </ExpansionPanelSummary>
    <ExpansionPanelDetails>

    </ExpansionPanelDetails>
  </ExpansionPanel>
  <ExpansionPanel expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
    <ExpansionPanelSummary
      expandIcon={<ExpandMoreIcon />}
      aria-controls="panel2bh-content"
      id="panel2bh-header"
    >

    </ExpansionPanelSummary>
    <ExpansionPanelDetails>

    </ExpansionPanelDetails>
  </ExpansionPanel>


</div>

);

}

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/ExpansionPanel”导入ExpansionPanel；
从“@material ui/core/ExpansionPanelDetails”导入ExpansionPanelDetails；
从“@material ui/core/ExpansionPanelSummary”导入ExpansionPanelSummary；
从“@material ui/icons/ExpandMore”导入ExpandMoreIcon；
const useStyles=makeStyles（主题=>({
}));
导出默认函数ControlleExpansionPanels（）{
const classes=useStyles（）；
const[expanded，setExpanded]=React.useState（false）；
const handleChange=panel=>（事件，isExpanded）=>{
setExpanded（isExpanded？面板：假）；
};
返回(
);
}

---

请帮忙

很难说您有什么问题，如果您没有正确描述它或交付整个代码，我确实将您的功能组件写入了类组件中，但我无法真正检查它是否工作，或者handleChange是否有任何问题。请检查并让我知道问题是什么，以及它是否纠正了您的问题

export default class ControlledExpansionPanels extends Component {
    constructor(props){
        super(props)
        this.state = {expanded: false}
    }

    handleChange =  panel => (event, isExpanded) =>{
    if(isExpanded) {
        this.setState({expanded: panel})
    } else {
        this.setState({expanded: false})
    }

    }
    render() {
        const classes = useStyles();
        return (
            <div className={classes.root}>
            <ExpansionPanel
              expanded={this.state.expanded === "panel1"}
              onChange={() => this.handleChange("panel1")}
            >
              <ExpansionPanelSummary
                expandIcon={<ExpandMoreIcon />}
                aria-controls="panel1bh-content"
                id="panel1bh-header"
              ></ExpansionPanelSummary>
              <ExpansionPanelDetails></ExpansionPanelDetails>
            </ExpansionPanel>
            <ExpansionPanel
              expanded={this.state.expanded === "panel2"}
              onChange={() => this.handleChange("panel2")}
            >
              <ExpansionPanelSummary
                expandIcon={<ExpandMoreIcon />}
                aria-controls="panel2bh-content"
                id="panel2bh-header"
              ></ExpansionPanelSummary>
              <ExpansionPanelDetails></ExpansionPanelDetails>
            </ExpansionPanel>
          </div>
        )
    }
}

导出默认类ControlleExpansionPanels扩展组件{
建造师（道具）{
超级（道具）
this.state={expanded:false}
}
handleChange=panel=>（事件，isExpanded）=>{
如果（扩展）{
this.setState（{expanded:panel}）
}否则{
this.setState（{expanded:false}）
}
}
render（）{
const classes=useStyles（）；
返回(
this.handleChange（“panel1”）}
>
this.handleChange（“panel2”）}
>
)
}
}

事情会是这样的

 export default class ControlledExpansionPanels extends React.Component {


 // const classes = useStyles();// // you can't use custom hook in class Component //

 const [expanded, setExpanded] = React.useState(false); // previous hook now not needed //

 state = { expanded: false }




handleChange = panel => (event, isExpanded) => {
 // setExpanded(isExpanded ? panel : false); // //previous state manager , now not needed //
 isExpanded ? this.setState({ expanded: panel}) : this.setState({ expanded: false }) //new state manager//
 };

render() {
  return (

  <div className={classes.root}>

  <ExpansionPanel expanded={this.state.expanded === 'panel1'} onChange={this.handleChange('panel1')}>

   <ExpansionPanelSummary
      expandIcon={<ExpandMoreIcon />}
      aria-controls="panel1bh-content"
      id="panel1bh-header"
    >


    </ExpansionPanelSummary>
    <ExpansionPanelDetails>

    </ExpansionPanelDetails>
  </ExpansionPanel>
  <ExpansionPanel expanded={this.state.expanded === 'panel2'} onChange={this.handleChange('panel2')}>
    <ExpansionPanelSummary
      expandIcon={<ExpandMoreIcon />}
      aria-controls="panel2bh-content"
      id="panel2bh-header"
    >

    </ExpansionPanelSummary>
    <ExpansionPanelDetails>

    </ExpansionPanelDetails>
  </ExpansionPanel>


</div> 
)}

导出默认类ControlleExpansionPanels扩展React.Component{
//const classes=useStyles（）；///不能在类组件中使用自定义挂钩//
const[expanded，setExpanded]=React.useState（false）；//现在不需要上一个钩子//
状态={扩展：false}
handleChange=panel=>（事件，isExpanded）=>{
//setExpanded（isExpanded？panel:false）；///以前的状态管理器，现在不需要//
isExpanded？this.setState（{expanded:panel}）：this.setState（{expanded:false}）//新状态管理器//
};
render（）{
返回(
)}

我认为这应该行得通。除了你自己的钩子，一切都很好。

从“React”导入React；
import React from 'react';

export default class ControlledExpansionPanels extends Component {
constructor(props){
    super(props)
    this.state = {expanded: false}
}

handleChange =  panel => (event, expanded) =>{
if(expanded) {
    this.setState({expanded: panel})
} else {
    this.setState({expanded: false})
}

}
render() {
    return (
        <div>
        <ExpansionPanel
          expanded={this.state.expanded === "panel1"}
          onChange={this.handleChange("panel1")}
        >
          <ExpansionPanelSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel1bh-content"
            id="panel1bh-header"
          ></ExpansionPanelSummary>
          <ExpansionPanelDetails></ExpansionPanelDetails>
        </ExpansionPanel>
        <ExpansionPanel
          expanded={this.state.expanded === "panel2"}
          onChange={this.handleChange("panel2")}
        >
          <ExpansionPanelSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel2bh-content"
            id="panel2bh-header"
          ></ExpansionPanelSummary>
          <ExpansionPanelDetails></ExpansionPanelDetails>
        </ExpansionPanel>
      </div>
    )
}}

导出默认类ControlleExpansionPanels扩展组件{
建造师（道具）{
超级（道具）
this.state={expanded:false}
}
handleChange=panel=>（事件，展开）=>{
如果（扩展）{
this.setState（{expanded:panel}）
}否则{
this.setState（{expanded:false}）
}
}
render（）{
返回(
)
}}

useStyles是您的自定义钩子吗？@AtinSingh我相信这是material ui的钩子=>好的，让我来看看check@DamianBusz刚刚签出。钩子是在主组件外面声明的，所以保持其他代码不变，我们可以在render里面转换类const。但是我仍然不明白为什么要转换这个函数l组件到class@AtinSingh这是一个很好的问题，我个人会把它作为功能组件。如果useStyle不是你的自定义钩子，那么你可以在返回之前声明render中的const，如@Damian的answerthrows错误中所述：“expanded”没有定义行中没有undef哦，是的，我的错，扩展的属性应该是

扩展的={this.state.expanded==“panel1”}

与panel2相同。同时，如果要重构它，可以通过

const{expanded}在返回渲染函数之前先对状态进行分解=this.state

@trek没问题。干杯！！这是正确的，我的错。我忘了在前面添加这个.state，因为它是类组件状态的一部分。我猜它太习惯于钩子了：）在帖子中编辑了代码，现在应该好了这在将expanded={expanded=='panel1'}更改为expanded={this.state.expanded=='panel1'}。谢谢！@trek欢迎您。如果这是一个正确的答案，请将其标记为正确答案，以供有类似问题的人使用，并且可能会发现您的主题。谢谢Sanchari，谢谢您的答案！也许您可以编辑您的答案，以便更详细地说明您的代码示例与问题示例的不同之处，以及它是如何解决这个问题的？这比扫描整个代码更容易发现主要的更改。