React Mixins By Example #3

HTML

<script src="http://fb.me/react-with-addons-0.11.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */
var LogOnMountMixin = {
    componentDidMount: function () {
        console.log("mixin mount method");
    },
};

var MoreLogOnMountMixin = {
    componentDidMount: function () {
        console.log("another mixin mount method");
    },
};

var OuterComponent = React.createClass({
    render: function () {
        return (
            <div>
                <ComponentOne name="Milo" />
                <ComponentTwo name="Lizzie" />
            </div>
        );
    }
});

var ComponentOne = React.createClass({
    mixins: [MoreLogOnMountMixin, LogOnMountMixin],
    componentDidMount: function () {
        console.log("component one mount method");
    },
    render: function() {
        return <h2>Hello {this.props.name}</h2>;
    }
});

var ComponentTwo = React.createClass({
    mixins: [ LogOnMountMixin, MoreLogOnMountMixin],
    getDefaultProps: function () {
        return {food: "Pancakes"};
    },
    componentDidMount: function () {
        console.log("component two mount method");
    },
    render: function () {
        return (
            <div>
                <h4>{this.props.name}</h4>
                <p>Favorite food: {this.props.food}</p>
            </div>
        );
    }
});

React.renderComponent(<OuterComponent />, document.body);