当使用 withStyles 导出子组件时，如何访问父组件中的引用（refs）？

Question

for eg.

Child.js

//assume there is s as styles object and used in this component
class Child extends Component {
 render() {
  return (
    <h1 ref={(ref)=>{this.ref = ref}}>Hello</h1>
  );
 }
}

export default withStyles(s)(Child);

Parent.js

class Parent extends Component {
 onClick() {
    console.log(this.child) // here access the ref
    console.log(this.child.ref) // undefined
 }
 render() {  
  return (
    <div>
      <Child ref={child => this.child = child} />
      <button onClick={this.onClick.bind(this)}>Click</button>
    </div>
  );
 }
}

由于样式的改变，整个父组件中的this.child ref也发生了改变。请帮我想出一个解决方法，但请勿放弃使用withStyles。

- Divyank Karolia

Answer 1

您可以使用 innerRef 属性，并将其用于获取子元素的引用，例如：

class Child extends Component {
 componentDidMount() {
    this.props.innerRef(this);
 }
 render() {
  return (
    <h1 ref={(ref)=>{this.ref = ref}}>Hello</h1>
  );
 }
}

export default withStyles(s)(Child);

并且在父元素中

class Parent extends Component {
 onClick() {
    console.log(this.child) // here access the ref
    console.log(this.child.ref) // undefined
 }
 render() {  
  return (
    <div>
      <Child innerRef={child => this.child = child} />
      <button onClick={this.onClick.bind(this)}>Click</button>
    </div>
  );
 }
}

- Shubham Khatri

---

救命稻草（y）。你能指出一个详细解释innerRef的链接，或者请说明它是如何工作的。 - Divyank Karolia

上述解决方案显示错误“this.props.innerRef不是函数”，但在删除componentDidUpdate部分后可以正常工作？ - Divyank Karolia

非常感谢！我撞了两天的墙，你的回答救了我。 - Vlado

如果您在循环中有子组件，例如重复出现的框或图表，它的表示法将是什么？使用 innerRef 方法，您如何引用该组件的多个实例？ Translated text: 如果您在循环中有子组件，例如重复出现的框或图表，它的表示法将是什么？使用 innerRef 方法，您如何引用该组件的多个实例？ - Vlado

@Vlado，在这种情况下，您可以将this.child设置为一个对象，其中键是在循环中呈现的元素的id。<Child innerRef={child => this.child[id] = child} /> - Shubham Khatri

谢谢，我已经实现了它：https://jsfiddle.net/pum1cq5r/4/ - Vlado

Answer 2

让您的子组件拥有一个名为 onRef 的 prop 方法，如下所示：

class Child extends Component {
  componentDidMount() {
    this.props.onRef(this);
  }

  render() {
    return (
      <h1 ref={(ref) => { this.ref = ref }}>Hello</h1>
    );
  }
}  

然后在您的父方法中，您可以使用回调访问子引用，如下所示:

class Parent extends Component {
  onClick() {
    console.log(this.childHoc) // here access the withStyle ref
    console.log(this.actualChild) // here access the actual Child Component ref
  }
  render() {
    return (
      <div>
        <Child ref={childHoc => this.childHoc = childHoc} onRef={actualChild => this.actualChild = actualChild} />
        <button onClick={this.onClick.bind(this)}>Click</button>
      </div>
    );
  }
}

- AkshayM