@@ -34,7 +34,7 @@ class SomePlugin extends React.Component {
34
34
}
35
35
36
36
render() {
37
- return <div ref={el => ( this.el = el) } />;
37
+ return <div ref={el => this.el = el} />;
38
38
}
39
39
}
40
40
```
@@ -76,7 +76,7 @@ class Chosen extends React.Component {
76
76
render() {
77
77
return (
78
78
<div>
79
- <select className="Chosen-select" ref={el => ( this.el = el) }>
79
+ <select className="Chosen-select" ref={el => this.el = el}>
80
80
{this.props.children}
81
81
</select>
82
82
</div>
@@ -161,7 +161,7 @@ class Chosen extends React.Component {
161
161
162
162
componentDidUpdate (prevProps ) {
163
163
if (prevProps .children !== this .props .children ) {
164
- this .$el .trigger (' chosen:updated' );
164
+ this .$el .trigger (" chosen:updated" );
165
165
}
166
166
}
167
167
@@ -177,7 +177,7 @@ class Chosen extends React.Component {
177
177
render () {
178
178
return (
179
179
< div>
180
- < select className= " Chosen-select" ref= {el => ( this .el = el) }>
180
+ < select className= " Chosen-select" ref= {el => this .el = el}>
181
181
{this .props .children }
182
182
< / select>
183
183
< / div>
@@ -216,11 +216,15 @@ function Button() {
216
216
return < button id= " btn" > Przywitaj się< / button> ;
217
217
}
218
218
219
- ReactDOM .render (< Button / > , document .getElementById (' container' ), function () {
219
+ ReactDOM .render (
220
+ < Button / > ,
221
+ document .getElementById (' container' ),
222
+ function () {
220
223
$ (' #btn' ).click (function () {
221
- alert (' Cześć!' );
222
- });
223
- });
224
+ alert (' Cześć!' );
225
+ });
226
+ }
227
+ );
224
228
```
225
229
226
230
Od tego momentu możesz zacząć przenosić coraz więcej logiki do samego komponentu i stosować coraz więcej praktyk reactowych. Przykładowo, w komponentach zwykle nie stosuje się identyfikatorów, ponieważ komponenty mogą być renderowane wielokrotnie. Zamiast tego możemy skorzystać z [ reactowego systemu zdarzeń] ( /docs/handling-events.html ) i podpiąć detektor zdarzeń bezpośrednio na reactowym elemencie ` <button> ` :
@@ -237,7 +241,10 @@ function HelloButton() {
237
241
return <Button onClick={handleClick} />;
238
242
}
239
243
240
- ReactDOM.render(<HelloButton />, document.getElementById('container'));
244
+ ReactDOM.render(
245
+ <HelloButton />,
246
+ document.getElementById('container')
247
+ );
241
248
```
242
249
243
250
[ ** Wypróbuj kod na CodePen** ] ( https://codepen.io/gaearon/pen/RVKbvW?editors=1010 )
@@ -264,7 +271,7 @@ const ParagraphView = Backbone.View.extend({
264
271
remove() {
265
272
ReactDOM.unmountComponentAtNode(this.el);
266
273
Backbone.View.prototype.remove.call(this);
267
- },
274
+ }
268
275
});
269
276
```
270
277
@@ -388,7 +395,7 @@ function connectToBackboneModel(WrappedComponent) {
388
395
delete propsExceptModel.model;
389
396
return <WrappedComponent {...propsExceptModel} {...this.state} />;
390
397
}
391
- };
398
+ }
392
399
}
393
400
```
394
401
@@ -412,11 +419,19 @@ function Example(props) {
412
419
props.model.set('firstName', e.target.value);
413
420
}
414
421
415
- return <BackboneNameInput model={props.model} handleChange={handleChange} />;
422
+ return (
423
+ <BackboneNameInput
424
+ model={props.model}
425
+ handleChange={handleChange}
426
+ />
427
+ );
416
428
}
417
429
418
- const model = new Backbone.Model({firstName: 'Staszek'});
419
- ReactDOM.render(<Example model={model} />, document.getElementById('root'));
430
+ const model = new Backbone.Model({ firstName: 'Staszek' });
431
+ ReactDOM.render(
432
+ <Example model={model} />,
433
+ document.getElementById('root')
434
+ );
420
435
```
421
436
422
437
[ ** Wypróbuj kod na CodePen** ] ( https://codepen.io/gaearon/pen/PmWwwa?editors=0010 )
0 commit comments