react 组件交互 父传子 子传父 非父子

//父组件->子组件 使用自定义属性，子组件通过props接收

//子---->父 使用是自定义事件 自定义事件也是在props

// 非父子 本地存储
本地存储 如果存储的数据是json或者arr,一定要先JSON.stringify 再存，取值时，取出来先JSON.parse

父传子

父组件==》

import React, { Component } from 'react'
import Child from './Child'
class Parent extends Component {
    state={
        name:'啊哈'
    }
    render() {
        return (
            <div className='box'>
    <h1>{this.state.name}</h1>
        <p name={this.state.name}></p>
      
        <h1>{this.state.msg}</h1>
<Child name={this.state.name} ></Child>
            </div>
        )
    }
}
export default Parent

子组件==》

import React, { Component } from 'react'
class Child extends Component {
    render() {
        return (
            <div className='box'>
    <h1>{this.props.name}</h1>
            </div>
        )
    }
}
export default Child

————————————————-——-——————————————
子传父

父组件===》

import React, { Component } from 'react'
import Child from './Child'
class Parent extends Component {
    state={
        name:'啊哈',
        msg:''
    }
    changeMsg(name){
this.setState({
    name
})
    }
    render() {
        return (
            <div className='box'>
    <h1>{this.state.name}</h1>
        <p name={this.state.name}></p>
      
        <h1>{this.state.msg}</h1>
<Child name={this.state.name} changeMsg={(e)=>{this.changeMsg(e)}} ></Child>
            </div>
        )
    }
}
export default Parent

子组件===》

import React, { Component } from 'react'
class Child extends Component {
    render() {
        return (
            <div className='box'>
    <h1>{this.props.name}</h1>
    <button onClick={()=>{this.props.changeMsg('111')}}>change msg</button>
            </div>
        )
    }
}
export default Child

——————————————————————————————————
非父子

存===》

 localStorage.setItem("username", JSON.stringify(this.state.user))

取===》

JSON.parse(localStorage.getItem('username'))