react的父子间传值

目录

父向子传值

子向父传值

---

父向子传值

父组件

import React, {Component} from 'react';
import ListList from '../pages/ListList';
class Aside extends Component{ // 类组件
    state = {
        info: 'hello'
    }
    render(){
        return (
            <div>
                {/* 注意写法，date 是对应子级的*/}
                <ListList date={ this.state.info } /> 
            </div>
        )
    }
}
export default Aside;

子组件

import React, {Component} from 'react';
class ListList extends Component{
    render(){
        return (
            <div>
                {/* date是对应父级传过来的 */}
                <div>接受到的{ this.props.date } </div> 
            </div>
        )
    }
}
export default ListList;

子向父传值

父组件：

import React, {Component} from 'react';
import ListList from '../pages/ListList';
class Aside extends Component{
    state = {
        info: 'hello'
    }
    handleChangeDate=(str)=>{  // 子级触发的
        this.setState({info: str})
    }
    render(){
        return (
            <div>
                {this.state.info }
                {/* 将方法传递给子级 */}
                <ListList handleChange={ this.handleChangeDate } /> 
            </div>
        )
    }
}
export default Aside;

子组件：

import React, {Component} from 'react';
class ListList extends Component{
    handleClik=()=>{ // 箭头函数this不会改变
        const { handleChange } = this.props // 接受父级的方法
        handleChange('您好')// 触发父级的方法
    }
    render(){
        return (
            <div>
                <div onClick={ this.handleClik } >点击改变 </div>
            </div>
        )
    }
}
export default ListList;