React-JS: Metodo di accesso di un bambino attraverso HOC involucro

Question

Ho un Editor componente che si presenta in questo modo:

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

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

modo che gli elementi che utilizzano EditorComp possono impostare un ref e chiamare il suo metodo focus e applicare messa a fuoco l'ingresso di livello inferiore, in questo modo:

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

Tuttavia, se sono EditorComp in una componente di ordine superiore (come react-redux s' connect()) il EditorComp perde metodo di messa a fuoco perché viene intrappolato sotto l'HOC.

Esempio:

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

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

C'è un modo per passare fino metodo o componente riferimenti attraverso i Hocs controllanti di un componente figlio?

---

Modifica: O esiste una soluzione inversa in cui il genitore trasmette una funzione che imposta il comando di messa a fuoco? Ho preso in considerazione l'utilizzo di event-emitter e l'ascolto del figlio di un evento focus chiamato dal genitore, tuttavia questo sembra poco pratico e non necessario.

Answer 1

1 via esempio ritorno bozzetto

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 modo tramandare posizione

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