使用Typescript在react中传递参数时出错

Question

When I pass the value parameter from App component to App2 component in react using typescript, it is giving an error

Property 'value' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<App2> & Readonly<{ children?: ReactNode; }> & Read...

The code of App.tsx is

import * as React from "react";
import './App.css';
 import App2 from './App2';


class App extends React.Component<any,any>{

  public render(){
    return(
      <div>
          <h1>
            <App2 value = {5}/>
          </h1>
        </div>
    )
  }

}
export default App;

and the code of App2 component is :-

import * as React from "react";


class App2 extends React.Component{

    public render(){
        return(
            <div>
            <h4>Hello world</h4>
           </div>

        )
    }
}
export default App2;

Answer 1

You need to specify the type for the properties to tell the compiler what properties are valid on the App2 component and what their types are:

class App2 extends React.Component<{ value: number }>{

  public render() {
    return (
      <div>
        <h4>Hello world</h4>
      </div>

    )
  }
}