ReagierenJS. So rufen Sie die Methode der Komponente aus der übergeordneten Komponente auf

Question

Mein Beispiel ist ein einfaches Bestellformular. I eine Hauptkomponente (Order) und innerhalb dieser Komponente mache I dynamische Liste von untergeordneten Komponenten (OrderLine)

class Order extends React.Component { 
    ... 
    render() { 
    return <div> 
     <strong>Total: $ {this.getTotal()}</strong> 
     <table id='orderlines' style={tableStyles}> 
     <tbody> 
      {this.getLines()} 
     </tbody> 
     </table> 
    </div> 
    } 

    getLines =() => { 
    return this.state.orderLines.map((item, _) => 
     <OrderLine key={item.id} {...item} />) 
    } 
} 

Child Komponente (OrderLine) hat Eingang (quantity) und Verfahren getTotal(), die für diese Linie, die die Summe berechnet

getTotal =() => (this.props.product.price * this.state.quantity).toFixed(2); 

Ziel ist es, die Gesamtsumme für den Auftrag zu berechnen.

Ich möchte etwas wie sum(map(allOrderLines, (line) => line.getTotal())) tun, aber ich kann nicht auf orderLine.getTotal() von der Order Komponente zugreifen.

Also, was ist der beste Weg, es zu tun? Ich weiß, wie man Elternstatus (geben Sie Callback-Funktion als Requisite) von Kind, aber ist es möglich, es von Eltern zu tun?

Voll Beispiel hier:

Answer 1

eine ref Instanz Ihre Auftragszeilen anhängen und rufen Sie die Funktion wie

orderLinesRef = []; 
getLines =() => { 
    return this.state.orderLines.map((item, _) => (
     <OrderLine 
     key={item.id} 
     ref={ref => (this.orderLinesRef[_] = ref)} 
     updateCallback={this.updateTotal} 
     {...item} 
     /> 
    )); 
    }; 

Answer 2

Sie ref wie diese order line

getLines =() => { 
return this.state.orderLines.map((item, _) => 
    <OrderLine 
    ref={instance => this.myOrder = instance} 
    key={item.id} 
    updateCallback={this.updateTotal} 
    {...item} 
    />) 

jetzt hinzufügen, können Sie Methoden der OrderLine über this.myOrder

zugreifen

Answer 3

Ich denke, die einfachste Option wäre, getTotal in die übergeordnete Order-Komponente zu verschieben und sie als Prop zu jeder OrderLine weiterzuleiten. Dann haben beide Komponenten Zugriff auf diese Dienstprogrammfunktion.

Order.js

render() { 
    const { id, product } = this.props; 
    return (
     <tr key={id}> 
     ... 
     <td> 
      {this.props.getTotal(this.props.product.price, this.state.quantity)} 
     </td> 
     </tr> 
    ); 
    } 

OrderLine.js

updateTotal =() => { 
    // You'll need a way to get the product price and quantity for each order line 
    let total = this.state.orderLines.reduce((sum, line) => { 
     sum = sum + this.getTotal(line.product.price, line.quantity); 
    }, 0); 

    this.setState({ total }); 
    };