Aufruf für Funktion auf reagieren

Question

Wie kann ich eine Funktion _toggleDropdown oder _onWindowClick aus einer anderen Klasse und Datei aufrufen?

DropDown.js

export default class DropDown extends React.Component { 

    _toggleDropdown(e) { 
    e.preventDefault() 
    this.setState({ 
     isActive: !this.state.isActive 
    }) 
    } 

    _onWindowClick(event) { 
    const dropdownElement = findDOMNode(this) 
    if (event.target !== dropdownElement && !dropdownElement.contains(event.target) && this.state.isActive) { 
     this.setState({ 
     isActive: false 
     }) 
    } 
    } 
} 

Header.js

<a onClick={what???}>test</a> 

Answer 1

Wenn DropDown Komponente innerhalb Header gerendert wird, können Sie refs verwenden, Dropdown-Instanz abrufen und Methoden aufrufen.

Header.js

render() { 
    return (<div> 
     <DropDown ref="dd"/> 
     <a onClick={e => this.refs.dd._toggleDropdown(e)}>Toggle</a> 
    </div>) 
} 

Wenn sie völlig unabhängig sind Sie besser Wechsel vom lokalen Zustand bis zu einem gewissen globalen Status-Management-Lösung wie Fluss oder redux würden. Und den Dropdown-Status als Teil des globalen Anwendungsstatus definieren, in dem sich jede Komponente ändern kann, indem eine entsprechende Aktion ausgelöst wird.

Answer 2

Nun, der einzige Weg, diese Art der Sache zu tun ist, um die Funktion als Requisiten an die Header-Komponente übergeben. Ich bin mir nicht sicher über Ihre Strukturen, um ein sauberes Stück mit den Ergebnissen zu machen. Vielleicht ist das Design nicht klar genug, um es dir leicht zu machen.