Facing Problem in der Komponente zur Klasse Reagieren Funktionskomponente Umwandlung

Question

Ich muß das von einer funktionalen Komponente zu einer Klasse Komponente konvertieren, damit ich die Vorteile der componentDidMount Methode des React.Component nehmen.

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

Ich verstehe nicht, was das Problem ist. Wie auch immer, hier geht es:

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> 
    ) 
    } 
}