react之父子组件传递

Posted 2023-02-27 fengshaopu

父传子

首先准备父页面跟子页面 HOME 跟 Adome

Home页面代码

import React,  Component  from "react";

class App extends React.Component 
  render() 
    return <div>我是Home页面</div>;
  


export default App;

Adome代码

import React from "react";

class App extends React.Component 
  render() 
    return <div>我是Adome页面</div>;
  


export default App;

然后Adome导入到Home里面

import React,  Component  from "react"; 
import Adome from '../Adome/index'//导入使用

class App extends React.Component 
  render() 
    return (
     <div>
          我是Home页面
          <Adome />
     </div>
    )
  


export default App;

然后创建数据通过props来接受

父页面

import React,  Component  from "react";
import Adome from '../Adome/index'
  
var arr =[
     name:"螃蟹",
     name:"螃蟹",
     name:"螃蟹",
     name:"螃蟹"
]

class App extends React.Component 
  render() 
    return (
     <div>
          我是Home页面
          <Adome arr=arr/>
     </div>
    )
  


export default App;

 

 子页面

import React from "react";


class App extends React.Component 
  render() 
    return(
           <div>
                  我是Adome页面
                  <br/>
                  
                      this.props.arr.map((item,index)=>
                      return <span key=index>item.name</span>
                      )
                  
            </div> 
    ) 
  


export default App;

子传父

子页面

import React from "react";
import Button from 'element-react'

class App extends React.Component 
    click=()=>       //这里注意要是箭头函数
        this.props.pvcacs("子页面")
        console.log("除法了");
    
  render() 
    return(
           <div>
                  我是Adome页面
                  <br/>
                  
                      this.props.arr.map((item,index)=>
                      return <span key=index>item.name</span>
                      )
                  
                  <br/>
                <Button type="success" onClick=this.click>子传父</Button>
            </div> 
    ) 
  


export default App;

 父页面

import React,  Component  from "react";
import Adome from '../Adome/index'
  
var arr =[
     name:"螃蟹",
     name:"螃蟹",
     name:"螃蟹",
     name:"螃蟹"
]

class App extends React.Component 
    pvcacs(obj)
          console.log(obj);
    
  render() 
    return (
     <div>
          我是Home页面
          <Adome arr=arr pvcacs=this.pvcacs/>
     </div>
    )
  


export default App;

效果图