我在一个函数中有这个代码

function Lobby () {

但我想将它传递给class Lobby extends Component {，以获得

render () {
    return (

但是把这些const和useEffect等..给了我一个错误，有没有办法把它“翻译”成一个组件？
我感谢那些能帮助我的人
原始代码：

function Lobby () {
    const [message, updateMessage] = useState('')
    const [messages, updateMessages] = useState([])

   

 useEffect(() => {
        const handleNewMessage = newMessage =>
            updateMessages([...messages, newMessage])
        socket.on('chat.message', handleNewMessage)
        return () => socket.off('chat.message', handleNewMessage)
    }, [messages])

   

 const handleFormSubmit = event => {
        event.preventDefault()
        if (message.trim()) {
            socket.emit('chat.message', {
                userid: myId,
                lobby,
                username: username,
                message
            })
            updateMessage('') 
            
const recibesound = document.getElementsByClassName("audio-element")[0]
        recibesound.play()
        
   

 }

}

const handleInputChange = event =>
updateMessage(event.target.value)

////teste
const handleTesteChange = event =>
updateMessage(event.target.value)

const handleTesteSubmit = event => {
    event.preventDefault()
    if (message.trim()) {
        socket.emit('chat.message', {
            userid: myId,
            message
            
   

 })
    updateMessage('') 
   
}

}
///teste


  

  return(  <div>
     //html
    </div>
)}
    
 

   export default Lobby;

目标：

class Lobby extends Component {

// same code

 render() {
   return(

<div>
 //html
</div>

 );
  }
}