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:
```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:
@ -55,10 +55,10 @@ With the new approach, both of these problems are solved. With React 16, you can
```js
// Yes, please
<div tabIndex="-1" />
<div tabIndex={-1} />
// 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.
@ -120,7 +120,7 @@ Below is a detailed list of them.
* **Known attributes with a different canonical React name:**
```js
<div tabindex="-1" />
<div tabindex={-1} />
<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:
```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:

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:
```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
<input readOnly={true} /> // Just like node.readOnly DOM API
```

Loading…
Cancel
Save