在JSX中围绕React组件封装高阶组件(HOC）

Wrapping a high order component(HOC) around a React component in JSX

本文关键字：组件 封装 高阶 HOC React JSX      更新时间：2023-09-26

我使用的是JSX风格的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.');
    }
}

在这种情况下，我认为您混淆了高阶组件（HOC）和容器组件。HOC获取一个组件（在您的案例中为Menu），然后返回一个组件。容器组件渲染其子级时。

如示例所示，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);
相关文章：