使用ES6模板链接的文本

Question

I would like to show "I read and agree to the privacy policy.privacy policy." text and the 'privacy policy' part of it must be a link.

I tried below but output is "I read and agree to the [object object]."

const privacyLink = <a href="">Privacy Policy</a>;
{`I read and agree to the ${privacyLink}`}

How can I do this using string template?

Answer 1

privacyLink is missing quotes. The template literal syntax is not correct. Define privacyLink as a string, define a separate template literal including privacyLink .

 const privacyLink = "<a href=>Privacy Policy</a>"; const template = `I read and agree to the ${privacyLink}`; document.body.innerHTML += template; 

or simply define privacyLink as a string and use += operator and .innerHTML to set the .innerHTML of an element within document

 const privacyLink = "I read and agree to the <a href=>Privacy Policy</a>"; document.body.innerHTML += privacyLink; 

Answer 2

Your question is missing the JSX tag, but you're clearly using JSX syntax so I'll answer it based on that interpretation.

When you write JSX, you're actually telling your transpiler to create a function, eg if you're using JSX with React, then

<a href="">Privacy Policy</a>

is

React.createElement('a', { href: '' }, 'Privacy Policy');

And the createElement returns on object, which is what's showing in your string template.

You can use string templates for building strings, so anything that you include inside the ${} must be a string, or it will be cast as a string.

You should continue to use JSX syntax for writing anything you want to include another JSX element. This can be a bit tricky, since any element tree needs to have a root element. Generally you're pretty safe to use a <span> , so in this case:

<span>I read and agree to the {privacyLink}</span>