用同一文件中的另一个组件包装React组件

Wrap React component with another component in the same file

本文关键字：组件 另一个 包装 React 文件      更新时间：2023-09-26

我有一个Button和Hovered组件。悬停组件保存状态和鼠标悬停事件，并将hovered道具传递给其子级。该按钮为普通按钮。

我希望能够访问悬停值作为按钮上的道具，但我不想在我使用的任何地方都用悬停来包装按钮。

有没有办法将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的内容放在一个单独的文件中，以最大限度地重复使用。

或者，如果你喜欢继承，你也可以通过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();
   }
}
相关文章：