Javascript 在JSX中围绕React组件包装高阶组件（HOC）

我正在使用React的编写方法，并尝试访问此包装器的功能，以了解用户何时单击。以下是自述文件中的用法：

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

从“React”导入React；
从“react OnClickOutside”导入OnClickOutside；
导出默认类菜单扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(

测试1
测试2
测试3

);
}
handleClickOutside（事件）{
log（'在外部单击'）；
}
}

我认为您在本例中混淆了（HOC）和容器组件。HOC获取一个组件（在您的例子中是

菜单

），然后返回一个组件（由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);

从“React”导入React；
从“react OnClickOutside”导入OnClickOutside；
导出类菜单扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
报税表（

测试1
测试2
测试3

);
}
handleClickOutside（事件）{
log（'在外部单击'）；
}
}
导出默认OnOutsideClick（菜单）；

我认为您在本例中混淆了（HOC）和容器组件。HOC获取一个组件（在您的例子中是

菜单

），然后返回一个组件（由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);

从“React”导入React；
从“react OnClickOutside”导入OnClickOutside；
导出类菜单扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
报税表（

测试1
测试2
测试3

);
}
handleClickOutside（事件）{
log（'在外部单击'）；
}
}
导出默认OnOutsideClick（菜单）；

您是否使用ReactDOM渲染应用程序？是的，如下所示：您是否使用ReactDOM渲染应用程序？是的，如下所示：它可以工作！我还在学习如何做这个JSX的事情。非常感谢。它起作用了！我还在学习如何做这个JSX的事情。非常感谢。