Интерполировать компонент React Link и передать его в качестве реквизита

Question

Я пытаюсь передать ссылку на компонент, где при нажатии она должна быть перенаправлена ​​на указанный c маршрут. Но здесь я мог видеть ссылку, интерполированную как [объект объекта].

Может ли кто-нибудь помочь мне с этим

 <CommonMessage description={`Click here ${<Link to="/signin">here</Link>} to login`} />

Вывод, который я получаю:

Нажмите [объект] для входа

Answer 1

Это потому, что компоненты React являются просто объектами, и когда вы помещаете их в строку Javascript, выполняете toString() над ними, и вы получаете результат, который вы получаете прямо сейчас.

Что бы я предложил вы передаете описание prop в качестве компонента React, например так:

<CommonMessage 
  description={
    <>
      Click here <Link to="/signin">here</Link> to login
    </>
  }
/>

Это дает вам хороший API, поскольку пользователь компонента теперь решает, какое содержимое будет отображаться.