JSX Gotchas Back

JSX looks like HTML but there are some important differences, and this chapter has introduced some.

HTML Entities

If we want to insert a literl text in HTML, you may write as followed:

<div>First &middot; Second</div>

But if you want to display within dynamic content, you may find an issue that React escapes all the strings you are displaying in order to prevent a wide range of XSS attacks by default.

/** bad display： "First · Second" */
var div = <div>{'First &middot; Second'}</div>;

Solutions:

i. use UTF-8 and make sure the file is saved as UTF-8.

var div = <div>{'First · Second'}</div>;

ii. find the unicode number corresponding to the entity.

var div = <div>{'First \u00b7 Second'}</div>;
var div2 = <div>{'First ' + String.fromCharCode(183) + ' Second'}</div>;

iii. use mixed arrays with strings and JSX elements. Each JSX element in the array needs a unique key.

var div = <div>{['First ', <span key="middot">&middot;</span>, ' Second']}</div>

iv. insert raw HTML directly.

var div = <div dangerouslySetInnerHTML={ { __html: 'First &middot; Second' } }</div>

Custom HTML Attributes

If you pass properties to native HTML elements that do not exist in the HTML specification, React will not render them. If you want to use a custom attribute, you should prefix it with data-.

var div = <div data-custom-attribute="foo" />;

However, arbitrary attributes are supported on custom elements (those with a hyphen(連字符) in the tag name or an is="..." attribute).

var xMyComponent = <x-my-component custom-attribute="foo" />;

Web Accessibility attributes starting with aria- will be rendered properly.

var div = <div aria-hidden={true} />;

Comments Copyright © aleen42 all right reserved, powered by aleen42

Empty Comments

Sign in GitHub

As the plugin is integrated with a code management system like GitLab or GitHub, you may have to auth with your account before leaving comments around this article.

Notice: This plugin has used Cookie to store your token with an expiration.

authorize