Change:
There was another issue tracking this , but it looks like it got merged into an issue that was already closed so it never got fixed.
There's also .
SVG images are an important part of my current project - is there anything I could do to help push this issue through?
is a newer PR without the merge conflicts of
Closed with

Discussion:
<del> --- pygments: true </del> <ins> --- markdown: redcarpet </ins> name: React <ins> redcarpet: extensions: - fenced_code_blocks </ins> react_version: 0.3.0 <del> exclude: </del> <ins> pygments: true exclude: </ins> - Gemfile - Gemfile.lock - README.md - Rakefile <del> redcarpet: extensions: - fenced_code_blocks markdown: redcarpet </del> baseurl: /react

<li><a href="/react/docs/component-lifecycle.html"{% if page.id == 'docs-component-lifecycle' %} class="active"{% endif %}>Component Lifecycle</a></li> <li><a href="/react/docs/event-handling.html"{% if page.id == 'docs-event-handling' %} class="active"{% endif %}>Event Handling</a></li> <li><a href="/react/docs/advanced-components.html"{% if page.id == 'docs-advanced-components' %} class="active"{% endif %}>Advanced Components</a></li> <ins> <li><a href="/react/docs/mixins.html"{% if page.id == 'docs-mixins' %} class="active"{% endif %}>Mixins</a></li> </ins> <li><a href="/react/docs/api.html"{% if page.id == 'docs-api' %} class="active"{% endif %}>API</a></li> </ul> </div>

description: How to build advanced composite components. layout: docs prev: event-handling.html <del> next: api.html </del> <ins> next: mixins.html </ins> --- Composite components extend a `ReactCompositeComponent` base class that provides

id: docs-api title: React API layout: docs <del> prev: advanced-components.html </del> <ins> prev: mixins.html </ins> --- ## React

<ins> --- id: docs-mixins title: Mixins layout: docs prev: advanced-components.html next: api.html --- Mixins allow code to be shared between multiple React components. They are pretty similar to mixins in Python or traits in PHP. Let's look at a simple example: ```javascript var MyMixin = { getMessage: function() { return 'hello world'; } }; var MyComponent = React.createClass({ mixins: [MyMixin], render: function() { return <div>{this.getMessage()}</div>; } }); ``` A class can use multiple mixins, but no two mixins can define the same method. Two mixins can, however, implement the same [lifecycle method](component-lifecycle.html). In this case, each implementation will be invoked one after another. The only exception is the `shouldComponentUpdate` lifecycle method. This method may only be implemented once (either by a mixin or by the component). ```javascript var Mixin1 = { componentDidMount: function() { console.log('Mixin1.componentDidMount()'); } }; var Mixin2 = { componentDidMount: function() { console.log('Mixin2.componentDidMount()'); } }; var MyComponent = React.createClass({ mixins: [Mixin1, Mixin2], render: function() { return <div>hello world</div>; } }); ``` When `MyComponent` is mounted into the page, the following text will print to the console: ``` Mixin1.componentDidMount() Mixin2.componentDidMount() ``` ## When should you use mixins? In general, add a mixin whenever you want a component to share some utility methods, public interface, or lifecycle behavior. Often it's appropriate to use them as you would use a superclass in another OOP language. </ins>