Reagieren Komponente Vererbung

Question

Basiskomponente

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; 

Kinderkomponente

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; 

Es ist wie zweite Komponente sieht ist nicht von ersten Methoden erben. Ich kann Eltern Methoden von Kind-Komponente aufrufen. Irgendwelche Ideen? Ich denke, Requisiten Validierung ist in Ordnung, weil es statisch ist, aber eine Lösung benötigen, um Methoden von Kind-Komponente erreichbar zu machen.

Answer 1

Wenn Sie die Methode des übergeordneten Elements in untergeordneten Elementen verwenden möchten, müssen Sie das übergeordnete Element erweitern und super in constructor aufrufen. super wird die constructor der übergeordneten Komponente ausführen. Wenn Sie also Ihre Methode in der constructor des Elternteils definieren oder referenzieren, kann sie zugänglich sein.

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>

hoffe, das hilft!