React-JS：通过 HOC 包装器访问子方法

Question

我有一个看起来像这样的Editor 组件：

class EditorComp extends Component {
  focus() {
    this.refs.input.focus();
  }

  render() {
    return (
      <input 
        ref="input"
        ...
      />
    );
  }
}

因此使用EditorComp 的元素可以设置一个引用并调用其focus 方法并将焦点应用于较低级别的输入，如下所示：

class Parent extends Component {
  render() {
    return (
      <div>
        <button onClick={() => this.refs.editor.focus()}>Focus</button>
        <EditorComp ref="editor" />
      </div>
    );
  }
}

但是，当将 EditorComp 包装在高阶组件中（如 react-redux 的 connect()）时，EditorComp 会失去焦点方法，因为它被困在 HOC 之下。

例子：

const WrappedEditor = connect()(EditorComp); // react-redux's connect, for example
const wrappedEditorInstance = <WrappedEditor />;

wrappedEditorInstance.focus() // Error! Focus is not a function.

有没有办法通过子组件的父 HOC 传递方法或组件引用？

---

编辑：或者是否有相反的解决方案，其中父母传递一个设置焦点命令的功能？我考虑过使用event-emitter，并让孩子听由父母调用的focus 事件，但这似乎笨拙且不必要。

Answer 1

1路返回comp实例

class EditorComp extends Component {
  focus() {
    this.refs.input.focus();
  }
  componentDidMount(){
    this.props.onMount(this)
  }
  render() {
    return (
      <input
        ref="input"
        ...
      />
    );
  }
}
export default connect(state=>({state}), actions)(EditorComp);


class Parent extends Component {
  render() {
    return (
      <div>
        <button onClick={() => this.editor.focus()}>Focus</button>
        <EditorComp  onMount={c=>this.editor=c}  ref="editor" />
      </div>
    );
  }
}

2路下传位置

class EditorComp extends Component {
  componentDidUpdate(prevProps, prevState){
    let {input}= this.refs
    this.props.isFocus? input.focus():input.blur();
  }
  render() {
    return (
      <input
        ref="input"
        ...
      />
    );
  }
}
export default connect(state=>({state}), actions)(EditorComp);


class Parent extends Component {
  render() {
    return (
      <div>
        <button onClick={() => this.setState({isfocus:true});}>Focus</button>
        <EditorComp  isFocus={this.state.isfocus}  ref="editor" />
      </div>
    );
  }
}