如何在常量和导出中包含href

Question

I am importing all the constants for my application from a single constant.js file.

export const ERR_DOB = "Enter your Date of birth"

I wish to add href in the that constant.

For eg:

export const txt = Click <a href="index.html">Here!<a>

But this not working as expected. Printing the same

"Click <a href='index.html'>Here!</a>"

Answer 1

with react, you can not just set innerHtml like that, the proper way to fix is to render children of your react virtual DOM. Or, you can use

dangerouslySetInnerHTML={{ __html: your html code }}

https://zhenyong.github.io/react/tips/dangerously-set-inner-html.html

Answer 2

Given that you are trying for internationalization, if you are not open to use any other library, then dangerourslySetInnterHTML is the only way to go ( see official docs )

But internationalization has many other use cases which may not easy to be handled by home grown solution (plurals, contenxtual translations etc.), for this I personally use and recommend: react-i18next ( website )

Your case where you want to use anchor tags, the Trans Component of the library will come handy.

To internationalize

Click <a href='index.html'>Here!</a>

You will have to wrap it within the Trans component:

<Trans i18nKey="myHref">
    Click <a href='index.html'>Here!</a>
</Trans>

Your translation will look like:

"myHref": "Click <1><0>Here!</1>,

To change it to some other message, you will not have to change your code, just change the dictionary:

"myHref": "Please <1><0>click here</1>,

Do look through their official site. They have decent documentation and also host examples on their github repo.