You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+31-6Lines changed: 31 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -201,7 +201,9 @@ export const C = props => {
201
201
202
202
### Class refs
203
203
204
-
Symptom: you get the following type error:
204
+
#### Symptom
205
+
206
+
You get the following type error:
205
207
206
208
```
207
209
test.tsx:1:1 - error TS2322: Type '{ ... }' is not assignable to type 'IntrinsicAttributes & Props'.
@@ -211,13 +213,30 @@ test.tsx:1:1 - error TS2322: Type '{ ... }' is not assignable to type 'Intrinsic
211
213
~~~
212
214
```
213
215
214
-
Cause: class components receives refs, and the ref points to the instance of the class. Functional components do not receive refs by default.
216
+
or you receive the following warning in the console:
217
+
218
+
```
219
+
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
220
+
221
+
Check the render method of `C`.
222
+
at App
223
+
```
224
+
225
+
or you receive some sort of null error (e.g. `Cannot read properties of undefined (reading 'a')`) because `ref.current` is always undefined.
226
+
227
+
#### Cause
215
228
216
-
Solution: this is not implemented now. However, once it is implemented you can opt in ref support by certain directives. It will generate `forwardRef` + `useImperativeHandle` to expose necessary APIs.
229
+
Class components receives refs, and the ref points to the instance of the class. Functional components do not receive refs by default.
230
+
231
+
#### Solution
232
+
233
+
This is not implemented now. However, once it is implemented you can opt in ref support by certain directives. It will generate `forwardRef` + `useImperativeHandle` to expose necessary APIs.
217
234
218
235
### Stricter render types
219
236
220
-
Symptom: you get the following type error:
237
+
### Symptom
238
+
239
+
You get the following type error:
221
240
222
241
```
223
242
test.tsx:1:1 - error TS2322: Type '(props: Props) => ReactNode' is not assignable to type 'FC<Props>'.
@@ -227,9 +246,15 @@ test.tsx:1:1 - error TS2322: Type '(props: Props) => ReactNode' is not assignabl
227
246
~
228
247
```
229
248
230
-
Cause: in DefinitelyTyped, `React.FC` is typed slightly stricter than the `render` method. You are expected a single element or `null`.
249
+
### Cause
250
+
251
+
In DefinitelyTyped, `React.FC` is typed slightly stricter than the `render` method. You are expected a single element or `null`.
252
+
253
+
We leave this untransformed because it is known not to cause problems at runtime.
254
+
255
+
### Solution
231
256
232
-
We leave this untransformed because it is known not to cause problems at runtime. An extra layer of a frament `<> ... </>` suffices to fix the type error.
257
+
An extra layer of a frament `<> ... </>` suffices to fix the type error.
0 commit comments