react组件的使用

凯宾斯基 / 2024-02-24 / 原文

数组传递

Hello.tsx

import * as React from "react"

#组件接收的变量
interface IProps{
    title:string,
    age:number,
    work?:string #通过增加？确定他为可选项参数(调用时可以不传)
}

export default class Hello extends React.Component<IProps>{
    // 组件初始化构造器--初始化状态和属性
    public constructor(props:any){
        super(props);
    }

    public render(){
        const {title} =this.props;
        console.log(title)
        return (
            <div>
                Hello: {this.props.title}
                Hello: {title}
                <br/>
                Hello: {this.props.age}
            
            </div>
            
        )
    }

}

APP.tsx

import * as React from 'react';
import Hello from "./components/Hello"

export default class APP extends React.Component{
    public render(){
      return (
          <div>
              #传递变量给子组件
            <Hello  title={"凯宾斯基"} age={123} />
          </div>
      )
  }
}

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  // React.StrictMode为严格模式会导致组件初始化2次
  <React.StrictMode>
    <App />
  </React.StrictMode>
);