将React组件与另一个组件包装在同一个文件中

我有一个ButtonHovered组件。 hover组件包含状态和鼠标hover事件,并将传递给其子项的道具。 该button是一个正常的button。

我想能够访问作为button上的道具的hover价值,但我不想要包装到处都使用Hidden的button。

有没有办法把Button组件包装在同一个Button.jsx文件中,这样我就可以将Hovered依赖放置在一个地方,但是仍然会传递道具?

你基本上想要用这样的东西来包装组件:

 //Button.jsx var Button = React.createClass({ //Stuff }); function Hoverify(Component) { var Hoverified = React.createClass({ //HOVER STUFF HERE render() { return <Component {...this.props} {...this.state} />; } }); return Hoverified; }; module.exports = Hoverify(Button); 

Hoverify东西放在一个单独的文件中以最大限度的重用。

另外,如果你更喜欢inheritance,你也可以通过ES6 / 7类来做这样的事情:

 export default class Hover extends React.Component { constructor(){ super(); this.onMouseOver = this.onMouseOver.bind(this); } //hove functions and such onMouseOver(){ console.log("look ma, I hovered"); } } export default class Button extends Hover { constructor(){ super(); } }