是否可以定义ReactJS Mixin方法,该方法可以在React Component中被覆盖?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (42)

Facebook ReactJS库具有关于哪些组件方法可以被覆盖以及如何重写的严格规则。除非特别允许,否则我们不能重新定义方法。

对于我的自定义mixin,如果我有一个我想允许覆盖的方法,我如何更新SpecPolicy?这甚至有可能吗?

这个例子是有点人为的,但它应该得到重点。假设我在下面的mixin试图提供一个默认renderItem方法,打算在必要时被覆盖。当我尝试渲染组件时<Hello ... />Invariant Violation出现错误。你可以在这里找到一个jsfiddle

var MyMixin = {
    render: function () {
        return this.renderItem();
    },
    renderItem: function () {
        return <div>Hello {this.props.name}</div>;
    }
};

var Hello = React.createClass({
    mixins: [MyMixin],
    renderItem: function() {
        return <div>Hey {this.props.name}</div>;
    }
});
提问于
用户回答回答于

你可以使用类似jQuery的扩展来扩展传递的对象React.createClass,而不是使用混合 - 这将允许你在需要时仍然使用Mixins,并在需要时使用这个方法(JS Fiddle):

/** @jsx React.DOM */

var MyMixin = {
    render: function () {
        return this.renderItem();
    },
    renderItem: function () {
        return <div>Hello {this.props.name}</div>;
    }
};

var Hello = React.createClass($.extend(MyMixin, {
    renderItem: function() {
        return <div>Hey {this.props.name}</div>;
    }
}));

React.renderComponent(<Hello name="World" />, document.body);

扫码关注云+社区

领取腾讯云代金券