Skip to content

Commit f1becec

Browse files
committed
Describe known limitations more
1 parent ae10704 commit f1becec

File tree

1 file changed

+31
-6
lines changed

1 file changed

+31
-6
lines changed

README.md

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,9 @@ export const C = props => {
201201

202202
### Class refs
203203

204-
Symptom: you get the following type error:
204+
#### Symptom
205+
206+
You get the following type error:
205207

206208
```
207209
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
211213
~~~
212214
```
213215

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
215228

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.
217234

218235
### Stricter render types
219236

220-
Symptom: you get the following type error:
237+
### Symptom
238+
239+
You get the following type error:
221240

222241
```
223242
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
227246
~
228247
```
229248

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
231256

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.
233258

234259
## Assumptions
235260

0 commit comments

Comments
 (0)