javascript - React Typescript FC

Question

What the difference between the code below? All of them works fine but I wanna know which use correctly

import * as React from 'react';

type Props = {...some props..};

const App: React.FC<Props> = props => {
  return (...some content...)
}

and

import React from 'react';

type Props = {...some props..};

const App: React.FC<Props> = props => {
  return (...some content...)
}

and

import React, { FC } from 'react';

type Props = {...some props..};

const App: FC<Props> = props => {
  return (...some content...)
}

Which variant wrong or right?

question from:https://stackoverflow.com/questions/65916448/react-typescript-fc

Answer 1

Mainly difference is the way you do the imports.

1. You import React object and assign an alias to it as 'React'. After that you use the "property" FC of the aliased import
2. You import React and you use the "property" FC of the import
3. You import React and then you import the named export FC which is the one you use later.

In the three cases you are importing the default exported from the module 'react' as React and in the third you import also the named export FC.

There is no just one valid way to do it and the result is the same.