title: React component inheritance
body: <p>Base component    </p>
  
  <pre><code>import React, { Component, PropTypes } from 'react';
  import { Link } from 'react-router';
  import { connect } from 'react-redux';
  import { addToCart, removeFromCart, changeQuantity } from '../../actions/CartActions';
  
  @connect(null, { addToCart, removeFromCart, changeQuantity })
  class Product extends Component {
    constructor() {
      super();
      this.addToCart = this.addToCart.bind(this);
    }
    addToCart() {
      this.props.addToCart(this.props.product);
    }
    removeFromCart() {
  
      this.props.removeFromCart(this.props.product);
    }
    changeProductQuantity() {
  
      this.props.changeQuantity(this.props.product);
    }
    render() {
      return (
        &lt;div className="product_box"&gt;
          &lt;h3&gt;{this.props.product.title}&lt;/h3&gt;
          &lt;Link to={`details/${this.props.product._id}`}&gt;
            &lt;img src={this.props.product.image_url} alt={this.props.product.title} /&gt;
          &lt;/Link&gt;
          &lt;p&gt;{this.props.product.description}&lt;/p&gt;
          &lt;p className="product_price"&gt;{this.props.product.price} {this.props.product.currency}&lt;/p&gt;
          &lt;Link onClick={this.addToCart} className="addtocart" /&gt;
          &lt;Link to={`details/${this.props.product._id}`} className="detail" /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  Product.propTypes = {
    product: PropTypes.shape({
      _id: PropTypes.string,
      title: PropTypes.string,
      description: PropTypes.string,
      image_url: PropTypes.string,
      price: PropTypes.string,
      currency: PropTypes.string,
    }),
    addToCart: PropTypes.func,
    removeFromCart: PropTypes.func,
    changeQuantity: PropTypes.func,
  };
  
  export default Product;
  </code></pre>
  
  <p>Child component</p>
  
  <pre><code>import React from 'react';
  import Product from '../common/Product';
  
  class InlineProduct extends Product {
    render() {
      const { product } = this.props;
      return (
        &lt;tr&gt;
          &lt;td&gt;
            &lt;img src={product.image_url} alt={product.title} /&gt;
          &lt;/td&gt;
          &lt;td&gt;{product.title}&lt;/td&gt;
          &lt;td className="align-center"&gt;
            &lt;input className="quantity-input" type="text" value="1" onChange={this.changeProductQuantity} /&gt;
          &lt;/td&gt;
          &lt;td className="align-right"&gt;{product.price} {product.currency}&lt;/td&gt;
          &lt;td className="align-right"&gt;{product.price} {product.currency}&lt;/td&gt;
          &lt;td className="align-center"&gt;
            &lt;a onChange={this.removeFromCart}&gt;
              &lt;img src="images/remove_x.gif" alt="remove" /&gt;&lt;br /&gt;Remove
            &lt;/a&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      );
    }
  }
  
  export default InlineProduct;
  </code></pre>
  
  <p>It's looks like second component can't inherit methods from first one.
  I can call parent's methods from child component. Any ideas?
  I think props validation is ok because it's static, but need some solution to make methods reachable form child component.</p>