基础组件
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;
看起来第二个组件无法从第一个组件继承方法。 我可以从子组件调用父方法。有任何想法吗? 我认为道具验证是可以的,因为它是静态的,但是需要一些解决方案来使方法可以从子组件中获得。
答案 0 :(得分:2)
如果您想在子级内部使用父级方法,则需要扩展父级并在super
中调用constructor
。 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>
希望这有帮助!