Use UTF-8 characters directly
<p>版权 ©</p>
Use HTML escape characters
<p>版权 ©</p>
or Decimal escape characters
<p>版权 ©</p>
But if you add a layer of curly brackets outside, react will use the escaped characters to prevent xss Character entities are escaped again
React will escape all strings to be displayed to the DOM to prevent XSS. Therefore, if JSX contains escaped entity characters, such as © (©), it will not be displayed correctly in the final DOM because React automatically escapes the special characters in ©.
<p>{'版权 ©'}</p>
Error output
版权 ©
Correct writing:
Using UTF-8 characters directly can still output correctly
<p>{'版权 ©'}</p>
The safe way is to use the corresponding Unicode code
<p>{'版权 \u00a9'}</p>
Use fromCharCode
<p>{'版权 ' + String.fromCharCode(169)}</p>
Use array assembly
<p>{['版权 ', <span>©</span>]}</p>
Use dangerouslySetInnerHTML to avoid React escape characters
<p dangerouslySetInnerHTML={{ __html: '版权 ©' }} />
JSX Gotchas
Deep into the react technology stack
Use UTF-8 characters directly
<p>版权 ©</p>
Use HTML escape characters
<p>版权 ©</p>
or decimal escape characters
<p>版权 ©</p>
But if you add a layer of braces outside, react will escape the escaped character entity again in order to prevent xss
React will escape all strings to be displayed in the DOM to prevent XSS. Therefore, if JSX contains escaped entity characters, such as © (©), it will not be displayed correctly in the final DOM because React automatically escapes the special characters in ©.
<p>{'版权 ©'}</p>
Error output
版权 ©
Correct writing:
Using UTF-8 characters directly can still output correctly
<p>{'版权 ©'}</p>
The safe way is to use the corresponding Unicode code
<p>{'版权 \u00a9'}</p>
Use fromCharCode
<p>{'版权 ' + String.fromCharCode(169)}</p>
Use array assembly
<p>{['版权 ', <span>©</span>]}</p>
Use dangerouslySetInnerHTML to avoid React escape characters
<p dangerouslySetInnerHTML={{ __html: '版权 ©' }} />
The above content is the HTML escape writing method in React, I hope it can help everyone.
Related recommendations:
What are the ways to write components in React
The difference between setState in React and Preact
The above is the detailed content of HTML escaping in React. For more information, please follow other related articles on the PHP Chinese website!