React関数コンポーネントをクラスコンポーネントに変換する際の問題

Question

React.ComponentのcomponentDidMountメソッドを利用できるように、これを機能コンポーネントからクラスコンポーネントに変換する必要があります。

const receivedStyle = { 
    marginRight: '0', 
    marginLeft: 'auto', 
}; 
const receivedBubble = { 
    backgroundColor: '#709AFF', 
    color: 'white', 
}; 
const receivedDate = { 
    marginRight: '0', 
    marginLeft: 'auto', 
}; 

const MessageBubble = ({ message, received }) => (
    <div className="message-bubble" style={received ? receivedStyle : null}> 
    <div className="bubble" style={received ? receivedBubble: null}> 
     {message.message} 
    </div> 
    <span className="date" style={received ? receivedDate: null}>{Moment(message.timestamp).startOf('minute').fromNow()}</span> 
    </div> 
); 

export default MessageBubble; 

Answer 1

私は何が問題なのか分かりません。とにかく、ここに行く：

import React, { Component } from 'react' 

const receivedStyle = { 
    marginRight: '0', 
    marginLeft: 'auto', 
} 

const receivedBubble = { 
    backgroundColor: '#709AFF', 
    color: 'white', 
} 

const receivedDate = { 
    marginRight: '0', 
    marginLeft: 'auto', 
} 

export default class MessageBubble extends Component { 
    componentDidMount() { 
    ... 
    } 

    render() { 
    const { message, received } = this.props 

    return (
     <div className="message-bubble" style={received ? receivedStyle : null}> 
     <div className="bubble" style={received ? receivedBubble: null}> 
      {message.message} 
     </div> 
     <span 
      className="date" 
      style={received ? receivedDate: null} 
     > 
      {Moment(message.timestamp).startOf('minute').fromNow()} 
     </span> 
     </div> 
    ) 
    } 
}