如何将 reactjs 中的常量和 useEffect 从 function 更改为渲染组件

Question

我在 function 中有这个代码

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>

 );
  }
}

Answer 1

根据您的理解，您正在尝试将您的钩子 function 组件转换为 class 组件。 您不能在 class 组件中使用任何挂钩函数。 您必须使用this.setState()而不是 useState 钩子（而不是 updateMessage 和 updateMessages）和this.state.message而不是“消息”，并使用componentDidUpdate方法而不是 useEffect 钩子来重写您的 class 组件。 对于您的函数 (handleInputChange)，您可以将它们定义为 class 的方法。 对于您的常量（recibesound），您可以在 class 之外定义它。

简而言之，你必须重写你的组件。 我建议查看有关 class 组件的 React 教程。