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

Question

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

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

有没有办法将 Button 组件包装在同一个 Button.jsx 文件中，以便我可以将 Hovered 依赖项保留在一个位置，但仍然可以传递 props？

Answer 1

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

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