说明
我们经常会碰到,父组件触发一个事件时,需要子组件的其中一个事件同时触发,而不是父组件触发时重新渲染子组件,对于这种情况,我们需要在子组件中设置ref,下面直接展示代码(以下代码是类组件的写法)
// Parent.js
import React, { Component, Fragment } from 'react';
import Child from './Child';
class Parent extends Component {
handleClick() {
this.line.subClick();
}
render() {
return (
<Fragment>
<button onClick={this.handleClick.bind(this)}>父级</button>
<Child
ref={line => this.line = line}
/>
</Fragment>
)
}
}
export default Parent;
// Child.js
import React, { Component } from 'react';
class Child extends Component {
subClick() {
console.log("父级触发了子级")
}
render() {
return (
<div onClick={this.subClick.bind(this)}>子级</div>
)
}
}
export default Child;