陣營-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. 

有沒有辦法通過一個孩子組件的父肝卵圓細胞失之交臂方法或組件引用？

---

編輯：或者是否存在一種相反的解決方案，在這種解決方案中，父母手執了一個設置焦點命令的功能？我考慮過使用event-emitter，讓孩子聽父母所調用的focus事件，但這看起來很笨重和不必要。

Answer 1

1的方式回報比較實例

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> 
    ); 
    } 
}