Wrapping einer Komponente hoher Qualität (HOC) um eine React-Komponente in JSX

Question

Ich benutze die JSX style von React schreiben und ich versuche auf die Funktionalität dieser onClickOutside Wrapper zugreifen, um herauszufinden, wenn der Benutzer wegklickt. Hier ist der Einsatz in seiner Readme:

// How to install: npm install react-onclickoutside --save 
// load the High Order Component: 
var onClickOutside = require('react-onclickoutside'); 

// create a new component, wrapped by this onclickoutside HOC: 
var MyComponent = onClickOutside(React.createClass({ 
    ..., 
    handleClickOutside: function(evt) { 
    // ...handling code goes here... 
    }, 
    ... 
})); 

Ich versuchte, die „Klick außerhalb“ -Funktionalität es in diesem Fall (in JSX) zugreifen zu können, aber es hat nicht funktioniert.

import React from 'react'; 
import OnClickOutside from 'react-onclickoutside'; 

export default class Menu extends React.Component { 

    constructor(props){ 
     super(props); 
    } 


    render() { 

     return (
      <OnClickOutside> 
       <ul> 
        <li>Test 1</li> 
        <li>Test 2</li> 
        <li>Test 3</li> 
       </ul> 
      </OnClickOutside> 
     ); 
    } 


    handleClickOutside(event) { 
     console.log('Clicked outside.'); 
    } 
} 

Answer 1

Ich glaube, du verwechselst eine Higher-Order Component (HOC) und eine Container-Komponente in diesem Fall. Ein HOC nimmt eine Komponente (in Ihrem Fall Menu) und gibt dann eine Komponente zurück (die mit der HOC-Funktionalität besteht). Während eine Container-Komponente ihre untergeordneten Elemente rendert.

Wie das Beispiel zeigt, ist die Komponente onOutsideClick ein HOC. Dies sollte für Ihr Beispiel funktionieren:

import React from 'react'; 
import OnClickOutside from 'react-onclickoutside'; 

export class Menu extends React.Component { 

    constructor(props){ 
     super(props); 
    } 


    render() { 

     return (  
       <ul> 
        <li>Test 1</li> 
        <li>Test 2</li> 
        <li>Test 3</li> 
       </ul> 
     ); 
    } 


    handleClickOutside(event) { 
     console.log('Clicked outside.'); 
    } 
} 

export default OnOutsideClick(Menu);