如何將 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 教程。