React 组件继承

Question

基础组件

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 (
      <div className="product_box">
        <h3>{this.props.product.title}</h3>
        <Link to={`details/${this.props.product._id}`}>
          <img src={this.props.product.image_url} alt={this.props.product.title} />
        </Link>
        <p>{this.props.product.description}</p>
        <p className="product_price">{this.props.product.price} {this.props.product.currency}</p>
        <Link onClick={this.addToCart} className="addtocart" />
        <Link to={`details/${this.props.product._id}`} className="detail" />
      </div>
    );
  }
}

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;

子组件

import React from 'react';
import Product from '../common/Product';

class InlineProduct extends Product {
  render() {
    const { product } = this.props;
    return (
      <tr>
        <td>
          <img src={product.image_url} alt={product.title} />
        </td>
        <td>{product.title}</td>
        <td className="align-center">
          <input className="quantity-input" type="text" value="1" onChange={this.changeProductQuantity} />
        </td>
        <td className="align-right">{product.price} {product.currency}</td>
        <td className="align-right">{product.price} {product.currency}</td>
        <td className="align-center">
          <a onChange={this.removeFromCart}>
            <img src="images/remove_x.gif" alt="remove" /><br />Remove
          </a>
        </td>
      </tr>
    );
  }
}

export default InlineProduct;

看起来第二个组件不能从第一个组件继承方法。 我可以从子组件调用父级的方法。有任何想法吗？ 我认为 props 验证是可以的，因为它是静态的，但需要一些解决方案来使方法可以从子组件访问。

Answer 1

如果要在children中使用parent的方法，需要继承parent，在constructor中调用super。 super 将运行父组件的constructor。因此，当您在父级的 constructor 中定义或引用您的方法时，它可以被访问。

class A extends React.Component{
  constructor(props) {
    super(props)
    this.parentMethod = this.parentMethod.bind(this) //referencing the method in constructor
  }
  
  parentMethod(){
    console.log('Parent Method')
  }
  
  render(){
    return false
  }
}

class B extends A{
  constructor(){
    super() //call super to run parent's constructor
  }
  
  render(){
    this.parentMethod() //calling parent method
    return false
  }
}

ReactDOM.render(
  <div>
    <A/>
    <B/>
  </div>,
  document.getElementById('app')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

希望这会有所帮助！