React component inheritance
<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>