Many layers of components are nested, and the outermost component clicks in order to trigger an event for a descendant component

1. CloseHeaderDropDown event to be triggered by the outer group

this.state = { isShowEventDeatil: CloseHeaderDropDown = () => {this.child = ref} // closeHeaderDropDown = () => {// closeHeaderDropDown = () => {// This.childfn (); this.childfn (); } render() {return (<div> <div onClick={this.closeHeaderDropDown}> <div className="close_detail">× XXXXXXXX </div> </div> // The component to trigger BetDetail <BetDetail onRef={this.onref}/> </div>)}Copy the code

2. BetDetail components

ComponentDidMount () {// Receive methods from parent components via pros, OnRef = (ref) => {this.child = ref} // Call the method used by the child childFn = (e) => { this.child.childFn(); } render() { return <BetDetailHeader onRef={this.onRef}> }Copy the code

3. BetDetailHeader components

ComponentDidMount () {// componentDidMount() {this.props. OnRef (this)} // componentDidMount() {this.props. OnRef (this)} // componentDidMount() {this.child () {this.props ChildFn = (e) => {this.child.checkDropdown (); } render() { return <div> <Heade onRef={this.onRef} </div> }Copy the code

4. The Header components

ComponentDidMount () {this.props. OnRef (this)} checkDropDown = () => {this.setState({ isShowDropDown: false }) } render() { return <header>{ isShowDropDown ? < aaaa > : "}</header>}Copy the code

  • Summary: When I first started doing this I thought it was stupid, if there were many levels it would be infinite parent… Mount a child = ref to receive child components. But this state is pretty much the only place it works. So I didn’t use redux management. “You only need Redux for things like React that really don’t work.”

conclusion

React QQ group:788023830 —- React/Redux - Old underground hero

Front-end COMMUNICATION QQ group:249620372 —- FRONT - END - JS FRONT END

(Our mission is, for overtime, for baldness… , look up to the big guy), I hope friends to study together