Node.js React功能组件向class组件转换中面临的问题

我需要将其从功能组件转换为类组件，以便利用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;

const receivedStyle={
marginRight:“0”，
marginLeft:'自动'，
};
接收常数气泡={
背景颜色：“#709AFF”，
颜色：'白色'，
};
常数receivedDate={
marginRight:“0”，
marginLeft:'自动'，
};
const MessageBubble=（{message，received}）=>(
{message.message}
{Moment（message.timestamp）.startOf（'minute'）.fromNow（）}
);
导出默认消息气泡；

我不明白出了什么问题。不管怎么说，它是这样的：

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

import React，{Component}来自“React”
const receivedStyle={
marginRight:“0”，
marginLeft:'自动'，
}
接收常数气泡={
背景颜色：“#709AFF”，
颜色：'白色'，
}
常数receivedDate={
marginRight:“0”，
marginLeft:'自动'，
}
导出默认类MessageBubble扩展组件{
componentDidMount（）{
...
}
render（）{
const{message，received}=this.props
返回(
{message.message}
{Moment（message.timestamp）.startOf（'minute'）.fromNow（）}
)
}
}

有什么问题？只需将ui部分放在render方法中，并使用

this.props

访问props值。检查文档，它甚至没有那么简单，您错过了

类

关键字，忘记了如何导入组件。您已经知道了：）我应该在哪里编写receivedStyle、receivedBubble和receivedDate的代码？与以前一样。您可以将它们保留在类组件之外。如何呈现

MessageBubble

？