如何将 React 元素插入字符串

Question

I would like to add React component into the string as JSX like this

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

how can I get the following output

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

Answer 1

You don't need a string; instead, you also need to use JSX syntax (this won't work with a string):

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

Answer 2

you can just use another function component to get the other HTML part, and then add it to the main app return function inside {} , here is a working snippet:

 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>