多个组件传递方法

来源:5-9 Redux 知识点复习补充

暴躁的排骨汤

2022-09-03

BaseComp为公用基础组件
ChildComp为业务组件
都是ParentComp 的子组件
有什么方法能在ChildComp监听 BaseComp组件onClick派发出的事件

class ParentComp extends Component {
	// ...
    render() {
        return <>
        <BaseComp selectedItem={(item)=>{selectedItem(item)}}/>
        <ChildComp {// todo}/>
         </>
    }
   // selectedItem(item) { }
   // ...
}
class BaseComp extends Component {
    constructor(props) {
        super(props)
        this.selectedItem = this.selectedItem.bind(this)
    }
    selectedItem(item) {
        //this.props.selectedItem(item)
    }
    render() {
        const list = this.props.list
        return <div className="list">
             <ul> 
               <li key={item.id}  onClick={() => { this.selectedItem(item) }}>{item.name}<li>  
             </ul>
        </div>
    }
}
class ChildComp extends Component {
   
    render() {
        return <div>
             
        </div>
    }
}
写回答

1回答

Dell

2022-09-12

ParentComp 传一个方法给 BaseComp,BaseComp 点击时,调用这个方法。在这个方法里,ParentComp 可以改变自己的数据,这个数据又传递给 ChildComp,通过数据的变动,让 ChildComp执行逻辑即可。

0
0

React零基础入门到实战,完成企业级项目简书网站开发

主流新技术 React-redux,React-router4,贯穿基础语法

5275 学习 · 2496 问题

查看课程