Question

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

我希望能够将这个悬停的值作为Button上的prop来访问，但是我不想在我使用它的任何地方将Button与Hovered包装起来。

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

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

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

1 个答案: