amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-22 03:42:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Edward Baggott <edward.baggott@shellenergy.co.uk>
This commit is contained in:
Edward
2020-11-30 10:13:31 +00:00
committed by GitHub
parent bf09ba8106
commit 5e437a10ed
3 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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
View File

@@ -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
View File

@@ -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
```