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

面对将React函数组件转换为类组件的问题

1 个答案: