React-JS: HOC-Wrapper Zugriff

Question

ein Kinder Verfahren durch Ich habe eine Editor Komponente, die so aussieht:

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

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

Damit Elemente, die EditorComp verwenden, um einen ref einstellen und seine focus Methode aufrufen und anwenden Fokus die untere Ebene Eingang, etwa so:

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

wenn jedoch EditorComp in einer höheren Ordnung Komponente (wie react-redux ‚s connect()) die EditorComp verliert Einwickeln der Fokus-Methode, weil es unter dem HOC gefangen wird.

Beispiel:

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

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

Gibt es eine Möglichkeit up-Methode oder Komponente Referenzen durch die Mutter HOV eine untergeordnete Komponente zu übergeben?

Edit: Oder gibt es eine umgekehrte Lösung, in der der Elternteil eine Funktion übergibt, die den Fokusbefehl setzt? Ich habe überlegt, ein event-emitter zu verwenden, und das Kind auf ein focus Ereignis zu hören, das vom Elternteil genannt wird, jedoch scheint dies unhandlich und unnötig.

Answer 1

1 Weg Rückkehr comp Instanz

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 Art und Weise überliefert Position

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