Anruf andere Komponente Methode

Question

ich diese kleine Komponente habe:

import React from 'react'; 

const Footer = (props) => { 
    return (
    <footer className="top"> 
     <p>{props.items} items in your menu</p> 
    </footer> 
) 
} 

const updateItems = (n) => { 
    this.props.items = this.props.items + n; 
}; 

Footer.propTypes = { 
    items: React.PropTypes.string.isRequired 
}; 

export default Footer; 

Und von der Hauptkomponente:

// All irrelevant imports 
import Footer from './Footer'; 

class App extends React.Component { 
    // All the irrelevant vars and methods 

    removeFish = (key) => { 
     const fishes = {...this.state.fishes}; 
     fishes[key] = null; 
     this.setState({ fishes }); 
     Footer.updateItems(-1); // <-- This is not updating the items count in the footer component 
    }; 
} 

Mein Footer.updateItems scheint nicht den Wert zu aktualisieren, selbst, dass die Konsole feuert keine Fehler und die App entspricht

Welches wäre der richtige Weg?

Answer 1

Zum einen updateItems ist keine Funktion der Footer Komponente

Zweitens Sie sollten nicht die Requisiten direkt ändern, müssen Sie Ihre Strukturierung ändern und den Umgang mit den Updates in der App Komponente und lassen Sie die Footer sein rein, wie es sich um eine zustandslose Komponente

import React from 'react'; 

const Footer = (props) => { 
    return (
    <footer className="top"> 
     <p>{props.items} items in your menu</p> 
    </footer> 
) 
} 

Footer.propTypes = { 
    items: React.PropTypes.string.isRequired 
}; 

export default Footer; 

App

ist

// All irrelevant imports 
import Footer from './Footer'; 

class App extends React.Component { 
    // All the irrelevant vars and methods 

    removeFish = (key) => { 
     const fishes = {...this.state.fishes}; 
     fishes[key] = null; 
     this.setState({ fishes }); 

     this.updateItems(-1); 
    }; 
    updateItems = (n) => { 
     this.setState((prevState) => ({items: prevState.items + n})) 
    }; 
    render(){ 
     return (
       <Footer items={this.state.items}/> 
     ) 
    } 
}