围绕JSX中的React组件包装高级组件(HOC)
问题描述:
我正在使用编写React的JSX style,我试图访问此onClickOutside包装的功能以找出用户何时单击。下面是其自述用法:围绕JSX中的React组件包装高级组件(HOC)
// 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.');
}
}
答
我想你混淆了这种情况下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);
+1
它的工作原理!我仍然在学习如何做这个JSX的事情。谢谢! –
+1
没有probs :) HOC非常有用,玩得开心! –
您使用ReactDOM呈现您的应用程序吗? – QoP
是的,像这样: http://i.imgur.com/LQ070Ss.png –