Как вставить элемент React в строку

Question

Я хотел бы добавить компонент React в строку как JSX вот так

const name = <a href="#"> World </a>
const a = 'Hello, {name}'
return <div>{a}</div>

как я могу получить следующий результат

<div> Hello, <a href="#">World</a></div>

Answer 1

Строка не нужна; вместо этого вам также необходимо использовать синтаксис JSX (это не будет работать со строкой):

const name = <a href="/">World</a>;
const a = <>Hello, {name}</>;
return <div>{a}</div>;

Answer 2

вы можете просто использовать другой функциональный компонент, чтобы получить другую часть HTML, а затем добавить его в функцию возврата основного приложения внутри {}, вот рабочий фрагмент:

function name() { 
  return (<a href="#"> World </a>);
}

const App = () => {
  const a = `Hello, `
  return (
    <div>{a} {name()}</div>
  );
};

ReactDOM.render(
  <App />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>