React父子组件传值

一、React创建组件

import React from 'react';//引入react模块

class Home extends React.Component {//创建一个类
    constructor(props) {//构造函数
        super()
    }

    


render() {//用来获取DOM元素
        return (//返回的JSX属性，return里面的第一个标签必须是Div
            <div className="Home_cintainer">
            
            </div>
        )
    }
}

export default Home

render react必须有一个render，它是用来获取DOM元素，如果没有render,React是获取不到在组件里写的JSX标签属性

二、 React组件的props,State属性

props一般用于接收外部传入的数据;而state则用于记录组件内部数据, 而且是需要经常改变的数据。

主要区别：

1. State是可变的，是一组用于反映组件UI变化的状态集合；
2. 而Props对于使用它的组件来说，是只读的，要想修改Props，只能通过该组件的父组件修改。
3. 在组件状态上移的场景中，父组件正是通过子组件的Props, 传递给子组件其所需要的状态。

三、父组件向子组件传值

概念：父组件通过属性把值传递到子组件里面去

父组件：

import React, { Component } from 'react';
import Index from "./index.js"//引入子组件，引入的组件名称一定要大写

export default class Home extends Component {
    constructor(props) {//1. 定义一个构造函数
        super(props)
    
        this.state = {//2. 设置初始化值
            items:"我是父组件"
        }
    }
    
    render() {
    console.log(this.state.items)//输出结果看能不能拿到上面定义好的初时化值，因为是在一个值是在一个组件里写的，因此不用props，用state就可以了
        return (
            <div>
                <Index data={this.state.items} />//把引入进来的子组件名称写入到Div里，单标签写入
                //data={this.state.items}：通过定义好的data属性，传递到子组件里
            </div>
        )
    }
}

子组件：

import React, { Component } from 'react'

export default class Index extends Component {
    constructor(props) {//构造函数，用来接收父组件传来的值
        super(props)
    
        this.state = {
             
        }
    }
    
    render() {
    console.log(this.props.data)//查看父组件是否已经把值传过来了
        return (
            <div>
                {this.props.data.items}//向页面上输出父组件传过来的值 
            </div>
        )
    }
}

四、子组件向父组件传值

概念：子组件就是通过父组件定义好的回调函数传到子组件里，子组件里的值在通过回调函数，返回到父组件里

父组件

import React, { Component } from 'react';
import Sone from "./Sone"

export default class Father extends Component {

constructor(props) {
    super(props)

    this.state = {
      value: '',//设置初始值
    }
  }


  handle = (index) => {//写个构造函数
    this.setState({//获取子元素传到的index上的数据，然后赋值到value上
      value: index
    })
    console.log(index)
  }


  render() {
    return (
      <div>
        <Sone item={this.handle} />//把在父组件上写好的方法通过属性传到父属性里
      </div>
    )
  }
}

子组件

import React, { Component } from 'react'

export default class Sone extends Component {
constructor(props) {
    super()
    this.state ={
      value:''
    }
  }
  

  handleOnChange=(index)=>{
    console.log(index.target.value)
    this.props.item(index.target.value)//通过父组件传进来的属性，把值回调到构造函数中
  }

  render() {
    return (
      <div>
        <input type="text" onChange={this.handleOnChange} />//通过onChange事件。把获取到的value值传到上面定义的构造函数中
      </div>
    )
  }
}

兄弟传值

概念：兄弟传值就是，一个子组件通过回调函数，把值传到父组件里，然后父组件通过属性传递到另一个子组件里

父组件

import React, { Component } from 'react'

export default class Index extends Component {
   constructor(props) {
    super(props)

    this.state = {
      valueInpur: ""
    }
  }

  handle = (index) => {
    this.setState({
      value: index
    })
    console.log(index)
  }

  	render() {
    console.log(this.props.data)//查看父组件是否已经把值传过来了
        return (
            <div>
        		<p>{this.state.valueInpur}</p>
        		<Sone2 items={this.state.value} />//把获取到的值传到另一个子组件里
        		<Sone item={this.handle} />//把定义好的一个方法通过属性传递到第一个子组件里
            </div>
        )
    }
}

第一个、子组件

import React, { Component } from 'react'

export default class Sone extends Component {
  constructor(props) {
    super()
    this.state ={
      value:''
    }
  }
  

  handleOnChange=(index)=>{
    console.log(index.target.value)
    this.props.item(index.target.value)
  }

  render() {
    return (
      <div>
          <input type="text" onChange={this.handleOnChange} />
      </div>
    )
  }
}

第二个、子组件

import React, { Component } from 'react'

export default class sone2 extends Component {
  render() {
    return (
      <div>
        {this.props.items}
      </div>
    )
  }
}