Browse Source

Change tabIndex to match the types (string to number) (#3409)

Co-authored-by: Edward Baggott <edward.baggott@shellenergy.co.uk>
main
Edward 4 years ago
committed by GitHub
parent
commit
5e437a10ed
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 8
      content/blog/2017-09-08-dom-attributes-in-react-16.md
  2. 2
      content/docs/introducing-jsx.md
  3. 2
      content/docs/reference-dom-elements.md

8
content/blog/2017-09-08-dom-attributes-in-react-16.md

@ -29,7 +29,7 @@ In React 16, we are making a change. Now, any unknown attributes will end up in
React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, it makes sense for React to use the `camelCase` convention just like the DOM APIs: React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, it makes sense for React to use the `camelCase` convention just like the DOM APIs:
```js ```js
<div tabIndex="-1" /> <div tabIndex={-1} />
``` ```
This has not changed. However, the way we enforced it in the past forced us to maintain a whitelist of all valid React DOM attributes in the bundle: This has not changed. However, the way we enforced it in the past forced us to maintain a whitelist of all valid React DOM attributes in the bundle:
@ -55,10 +55,10 @@ With the new approach, both of these problems are solved. With React 16, you can
```js ```js
// Yes, please // Yes, please
<div tabIndex="-1" /> <div tabIndex={-1} />
// Warning: Invalid DOM property `tabindex`. Did you mean `tabIndex`? // Warning: Invalid DOM property `tabindex`. Did you mean `tabIndex`?
<div tabindex="-1" /> <div tabindex={-1} />
``` ```
In other words, the way you use DOM components in React hasn't changed, but now you have some new capabilities. In other words, the way you use DOM components in React hasn't changed, but now you have some new capabilities.
@ -120,7 +120,7 @@ Below is a detailed list of them.
* **Known attributes with a different canonical React name:** * **Known attributes with a different canonical React name:**
```js ```js
<div tabindex="-1" /> <div tabindex={-1} />
<div class="hi" /> <div class="hi" />
``` ```

2
content/docs/introducing-jsx.md

@ -92,7 +92,7 @@ function getGreeting(user) {
You may use quotes to specify string literals as attributes: You may use quotes to specify string literals as attributes:
```js ```js
const element = <div tabIndex="0"></div>; const element = <div tabIndex={0}></div>;
``` ```
You may also use curly braces to embed a JavaScript expression in an attribute: You may also use curly braces to embed a JavaScript expression in an attribute:

2
content/docs/reference-dom-elements.md

@ -130,7 +130,7 @@ As of React 16, any standard [or custom](/blog/2017/09/08/dom-attributes-in-reac
React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, React uses the `camelCase` convention just like the DOM APIs: React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, React uses the `camelCase` convention just like the DOM APIs:
```js ```js
<div tabIndex="-1" /> // Just like node.tabIndex DOM API <div tabIndex={-1} /> // Just like node.tabIndex DOM API
<div className="Button" /> // Just like node.className DOM API <div className="Button" /> // Just like node.className DOM API
<input readOnly={true} /> // Just like node.readOnly DOM API <input readOnly={true} /> // Just like node.readOnly DOM API
``` ```

Loading…
Cancel
Save