一、父组件向子组件
- 父组件在调用子组件的时候，将属性传递给子组件
//这个是父组件
export default class Father extends Component {
constructor(){
super()
this.state={
list:['a','b','c']
}
}
render() {
return (
<div>
<Children list={this.state.list} />
</div>
)
}
}
- 子组件通过props接受父组件传过来的属性
export default class Children extends Component {
render() {
let {list} = this.props
return (
<ul>
{
list.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
)
}
}
二、子组件向父组件
- 父组件将一个改变自身状态的方法传递给子组件
//Txt为子组件，传递给子组件的方法为this.add()
export default class Father extends Component {
constructor(){
super()
this.state={
list:[]
}
}
add = str => {
console.log(str)//str为子组件传递过来的参数
this.setState({
list:[...this.state.list,str]
})
}
render() {
return (
<div>
<Txt add={this.add}></Txt>
<List list={this.state.list} />
</div>
)
}
}
- 子组件通过调用父组件传递过来的方法实现通信，当子组件调用该方法时，把数据放到参数里面传递给父组件，父组件的方法即会执行，完成通信
export default class Txt extends Component {
input = (e) => {
if(e.keyCode === 13){
let {add} = this.props
add(e.target.value)
}
}
render() {
return (
<div>
<input onKeyUp={this.input} type="text" />
</div>
)
}
}
