//父组件->子组件 使用自定义属性,子组件通过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'))