圍繞JSX中的React組件包裝高級組件（HOC）

Question

我正在使用編寫React的JSX style，我試圖訪問此onClickOutside包裝的功能以找出用戶何時單擊。下面是其自述用法：

// 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... 
    }, 
    ... 
})); 

我試圖訪問在此情況下（JSX）「點擊之外」的功能，但它沒有工作。

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

我想你混淆了這種情況下Higher-Order Component（HOC）和容器組件。 HOC需要一個組件（在你的情況下爲Menu），然後返回一個Component（由HOC功能組成）。容器組件呈現其子項。

如示例所示，onOutsideClick組件是HOC。這應該適用於您的示例：

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