mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Consistent CodePen links in docs
This commit is contained in:
@@ -41,7 +41,7 @@ ReactDOM.render(
|
||||
);
|
||||
```
|
||||
|
||||
[Try it out on CodePen.](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)
|
||||
[Try it on CodePen.](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)
|
||||
|
||||
This example renders a different greeting depending on the value of `isLoggedIn` prop.
|
||||
|
||||
@@ -115,7 +115,7 @@ ReactDOM.render(
|
||||
);
|
||||
```
|
||||
|
||||
[Try it out on CodePen.](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
|
||||
[Try it on CodePen.](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
|
||||
|
||||
While declaring a variable and using an `if` statement is a fine way to conditionally render a component, sometimes you might want to use a shorter syntax. There are a few ways to inline conditions in JSX, explained below.
|
||||
|
||||
@@ -237,4 +237,4 @@ ReactDOM.render(
|
||||
);
|
||||
```
|
||||
|
||||
[Try it out on CodePen.](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010)
|
||||
[Try it on CodePen.](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010)
|
||||
|
||||
+3
-1
@@ -4,7 +4,9 @@ title: Forms
|
||||
permalink: docs/forms.html
|
||||
prev: state-and-lifecycle.html
|
||||
next: lifting-state-up.html
|
||||
redirect_from: "tips/controlled-input-null-value.html"
|
||||
redirect_from:
|
||||
- "tips/controlled-input-null-value.html"
|
||||
- "docs/forms-zh-CN.html"
|
||||
---
|
||||
|
||||
HTML form elements work a little bit differently from other DOM elements in React, because form elements naturally keep some internal state. For example, this form in plain HTML accepts a single name:
|
||||
|
||||
@@ -42,7 +42,7 @@ ReactDOM.render(
|
||||
);
|
||||
```
|
||||
|
||||
[Try it out on CodePen.](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
|
||||
[Try it on CodePen.](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
|
||||
|
||||
This code displays a bullet list of numbers between 1 and 5.
|
||||
|
||||
@@ -94,7 +94,7 @@ ReactDOM.render(
|
||||
);
|
||||
```
|
||||
|
||||
[Try it out on CodePen.](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
|
||||
[Try it on CodePen.](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
|
||||
|
||||
## Keys
|
||||
|
||||
@@ -200,7 +200,7 @@ ReactDOM.render(
|
||||
);
|
||||
```
|
||||
|
||||
[Try it out on CodePen.](https://codepen.io/rthor/pen/QKzJKG?editors=0010)
|
||||
[Try it on CodePen.](https://codepen.io/rthor/pen/QKzJKG?editors=0010)
|
||||
|
||||
A good rule of thumb is that elements inside the `map()` call need keys.
|
||||
|
||||
@@ -244,7 +244,7 @@ ReactDOM.render(
|
||||
);
|
||||
```
|
||||
|
||||
[Try it out on CodePen.](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
|
||||
[Try it on CodePen.](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
|
||||
|
||||
Keys serve as a hint to React but they don't get passed to your components. If you need the same value in your component, pass it explicitly as a prop with a different name:
|
||||
|
||||
@@ -294,6 +294,6 @@ function NumberList(props) {
|
||||
}
|
||||
```
|
||||
|
||||
[Try it out on CodePen.](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
|
||||
[Try it on CodePen.](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
|
||||
|
||||
Sometimes this results in clearer code, but this style can also be abused. Like in JavaScript, it is up to you to decide whether it is worth extracting a variable for readability. Keep in mind that if the `map()` body is too nested, it might be a good time to [extract a component](/react/docs/components-and-props.html#extracting-components).
|
||||
|
||||
Reference in New Issue
Block a user