react组件的使用(含数据传递和状态)

数组传递

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>
);

 

状态设置(变量)

Hello.tsx

stage为状态

import * as React from "react"

// 接收参数
interface IProps{
    title:string,
    age:number
    work?:string
}

interface State {  //名字可以随便起
    date: string; // 定义 state 的结构  
  }  

export default class Hello extends React.Component<IProps,State>{
    // 组件初始化构造器
    public constructor(props:any){
        super(props);
        this.state = {    //state固定写法
            date: '11', // 初始化 state  
          };  
        //   参数调用的第一种方法
        this.clickHandler2=this.clickHandler2.bind(this)
    }

    //参数调用的第2种方法
    public clickHandler=()=>{
        this.setState({date:"111"})  //固定写法setState
    }

    //   参数调用的第一种方法
    public clickHandler2(){
        this.setState({date:"111"})
    }

    public render(){
        const {title} =this.props;
        console.log(title)
        return (
            <div>
                
                Hello: {this.props.title}
                Hello: {title}
                <br/>
                Hello: {this.props.age}
                {this.props.work}
                <br/>
                <p>当前日期: {this.state.date}</p> 
               
        <button onClick={this.clickHandler}>更新日期</button>
        <button onClick={this.clickHandler2}>更新日期</button>
            </div>
            
        )
    }

}

 

 

子组件调用父组件的方法

父组件

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

export default class APP extends React.Component{
  public AppHandler(){
    console.log("这个是父组件的方法")
  }

  public AppHandler2(data:String){
    console.log(data,111)
  }


    public render(){
      return (
          <div>
            <Hello  title={"凯宾斯基"} onMyClick={this.AppHandler} onMyClick2={this.AppHandler2}/>
          </div>
      )
  }
}

 

子组件

import * as React from "react"

// 接收参数
interface IProps{
    title:string,
    // 调用父组件的方法要加这个
    onMyClick:any,
    onMyClick2:any,
}

interface Statex {  
    date: string; 
  }  

export default class Hello extends React.Component<IProps,Statex>{
    public constructor(props:any){
        super(props);
        this.state = {  
            date: '11', 
          };  
        //   参数调用的第一种方法 这里要先这么写 下面clickHandler2函数才能直接调用
        this.clickHandler2=this.clickHandler2.bind(this)
    }

    // 参数调用的第一种方法
    public clickHandler2(){
        // 调用父组件的方法
        this.props.onMyClick(); //不传参调用
        this.props.onMyClick2("调用父组件方法且传参数");
    }

    public render(){
        return (
            <div>
                
                Hello: {this.props.title}
                <br/>
                <p>当前日期: {this.state.date}</p> 
               
        <button onClick={this.clickHandler}>更新日期</button>
        <button onClick={this.clickHandler2}>更新日期</button>
            </div>
            
        )
    }

}