Визуализация HTML внутри карты Material-UI с React

Question

У меня есть следующий компонент внутри .

<CardHeader
title={card.title}
subheader={`${moment(card.createdAt).startOf('minute').fromNow()}` + ' by ' + <div>ABC</div>}/>

Это выглядит следующим образом:

18 minutes ago by [object Object].

Как правильно сделать это? Заранее спасибо!

Answer 1

Оберните ваш заголовок во фрагмент

Вы можете выделить часть вашей логики c до ее собственного уровня. Это упростит повторное использование, а также упростит тестирование.

const MyHeading = ({card}) => {
  return (
    <React.Fragment>
      {`${moment(card.createdAt).startOf('minute').fromNow()} by`
      <div>ABC</div>
    </React.Fragment>
  )
}

В приведенном выше примере я извлекаю только карту, но вы можете передавать все виды данных в компонент заголовка.

<CardHeader
  title={card.title}
  subheader={<MyHeading {...props} />
/>

Answer 2

Вы можете передать узел подпроцессору CardHeader, только не смешивайте строку и html

<CardHeader
title={card.title}
subheader={<div>{moment(card.createdAt).startOf('minute').fromNow()} by ABC</div>}/>

Образец DEMO