javascript - 在 JSX 中的 React 组件周围包装高阶组件 (HOC)

Question

我正在使用JSX style编写 React，我正在尝试访问此 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)，然后返回一个组件(由 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);