Можете ли вы использовать jsx внутри строки шаблона в React Props?

Question

Можно ли поместить JSX в строку шаблона, которая используется в качестве опоры рендеринга React?

Это то, что я пытаюсь сделать, но это приводит к рендерингу ссылки как [object Object]

const Container = ({ message }) => <div className="from line 4"> {message}</div>;
const Link = () => <a href="#">juan</a>;

const App = () => (
  <div>
    <Container message={`My message with a ${<Link />}`} />
  </div>
);

Одна вещь, которую я попробовал, состояла в том, чтобы поместить JSX вместо строки шаблона внутри message.Это работает, но вводит новый div, который не нужен.

<Container
  message={<div>My message {<Link />}</div>}
/>

Я сделал это codesandbox , чтобы проиллюстрировать проблему

Answer 1

Вы можете использовать Фрагмент для рендеринга inline, как вы пытаетесь сделать, и для предотвращения добавления новой обертки <div />:

const App = () => (
  <div>
    <Container
      message={<React.Fragment>My message with a <Link /></React.Fragment>}
    />
  </div>
);

Вот раздвоенная версия вашегоCodesandbox, используя React.Fragment: https://codesandbox.io/s/nrmr9l34vl