我如何在同一个文件中同时使用 class 和功能组件

Question

I want to use both class and function in the same file and I am getting a parsing error that

App is already declared

My code:

import React from 'react'
import './App.css';


class App extends React.Component{
}



function App() {
  return (
    <div>
      
    </div>
  );
}

export default App;

How can I use both class and functional component in same file?

Answer 1

You cannot use a class component with a functional component inside of it. Because they work different, for example. Inside a class based component you have the render method that returns an html.

import React, { Component } from "react";

class ClassComponent extends Component {
 render() {
   return <h1>Hello, world</h1>;
 }
} 

And in a functional component the return of the function is and html.

import React from "react";

function FunctionalComponent() {
 return <h1>Hello, world</h1>;
}

You can also declare a functional component through a anonymous function

import React from "react";
 
const FunctionalComponent = () => {
 return <h1>Hello, world</h1>;
};

For further information you can check here or the documentation