Zurück zum Blog

Elegante React-Komponenten-APIs mit Funktionen als untergeordnete Elemente

Blogvorlage 35
Rescale Engineering

reagieren
Wir können einige sehr elegante React Component APIs entwickeln, indem wir Funktionen als untergeordnete Elemente in React Components verwenden. Nehmen wir zum Beispiel eine Dropdown-Komponente. Wenn wir sie flexibel gestalten und die DOM-Struktur dem Benutzer überlassen möchten, benötigen wir eine Möglichkeit, Toggle-Elemente des Dropdowns zu kennzeichnen. Eine Möglichkeit ist die data-toggle Attribut:

Öffne
Dies erfordert jedoch die manuelle Einrichtung von Ereignis-Listenern auf realen DOM-Knoten, zum Beispiel dem componentDidMount Die Methode für diese Komponente könnte etwa so aussehen:
componentDidMount() { const togglers = ReactDOM .findDOMNode(this) .querySelectorAll('[data-toggle]'); Array.prototype.forEach.call(togglers, toggler => { toggler.addEventListener('click', this.toggle); }); },

Eine elegantere Lösung besteht darin, die Komponente freizulegen toggle Methode an ihre untergeordneten Elemente, indem eine Funktion als untergeordnetes Element verwendet wird:

  {Umschalten =>

}

 

Auf diese Weise verwenden wir das Ereignissystem von React anstelle von rohen DOM-Ereignissen und müssen nicht implementieren componentDidMount überhaupt.
Wenn die Funktion toggle heißt, die opened Die CSS-Klasse wird auf der div Element. Mit anderen Worten, die Komponente würde ein DOM generieren, das wie folgt aussieht:

Öffne
 

 
und wenn die toggle Funktion aufgerufen wird, opened Dem Element wird die Klasse hinzugefügt:

Öffne
 

 
Die Implementierung dieser Dropdown-Komponente sieht folgendermaßen aus:

const cx = erfordern('Klassennamen'); const enhanceWithClickOutside = erfordern('react-click-outside'); const React = erfordern('react'); const Dropdown = React.createClass({ getInitialState() { return { opened: false, }; }, handleClick(e) { // Dropdown schließen, wenn auf ein Menüelement geklickt wird if (this.state.opened && e.target.tagName === 'A') { this.setState({ opened: false }); } }, handleClickOutside(e) { if (!this.state.opened) return; this.setState({ opened: false }); }, toggle() { this.setState({ opened: !this.state.opened }); }, render() { const child = this.props.children(this.toggle); return React.cloneElement(child, { className: cx( child.props.className, 'dropdown', this.state.opened && 'opened' ), onClick: this.handleClick, }); }, }); module.exports = enhanceWithClickOutside(Dropdown);

this.props.children ist das untergeordnete Funktionselement der Dropdown-Komponente und wird mit der Instanz aufgerufen toggle Methode. Dies gibt ein React-Element zurück, das div, die wir klonen, um die dropdown und opened CSS-Klassen.
Eine Diskussion dieses Musters und anderer Anwendungsfälle aus der Praxis finden Sie werden auf dieser Seite erläutert.

Autorin

×