React学习过程（持续更新......）

React学习过程（持续更新…）

创建react的hello项目

使用node创建create-react-app脚手架项目

//首先你得先安装node，这里不做详细教程，我使用的node为20.18.0
npm isntall create-react-app -g //全局安装create-react-app
create-react-app 你的项目名称
cd 项目文件夹下
npm start
//创建完后的项目路径如下，没有Components。public里面没用的都删掉，留个ico和html，index.html里面也删除<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />和<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />,这样就比较干净了

父子传值

//父组件
import React,{Component} from 'react'
import Header from "./Components/Header";
import Footer from "./Components/Footer";
import List from "./Components/List";
export default class App extends Component{
    state={
        tList:[
            {
              cd:'1',
              name:'jwq'
            },
            {
                cd:'2',
                name:'zhn'
            },
            {
                cd:'3',
                name:'zwq'
            }
        ]
    }
headerFn=(data)=>{
        console.log(data,'headerFn')
    }
  render() {
    const {tList}=this.state
    return(
        <div>
           <Header headerFn={this.headerFn} />
           <List tList={tList}  />
           <Footer nums={tList.length} />
        </div>
    )
  }
}
//<List tList={tList}  />这样就把父组件的值传给子组件，子组件通过this.props.tList获取值
//子组件如何传值呢？子组件Header通过this.props.headerFn({cd:'4',name:‘zxy’})传给父组件，方法传值
//祖孙如何传值呢？也是比较简单的，假设List组件还有个子组件Item，那么父组件通过方法，传给List组件，
List组件通过方法告诉Item组件，在进行传值this.props.你的方法

原文地址：https://blog.csdn.net/jwqzhn/article/details/142817758

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！