调用其他组件的方法

Question

我有这个小部件：

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; 

而且从主要成分：

// 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 
    }; 
} 

我Footer.updateItems似乎并没有更新的价值，甚至控制台火没有错误，应用程序符合，

这将是正确的方法？

Answer 1

首先 updateItems不是页脚组件的功能

其次，你不应该直接更改的道具，你需要改变你的构造和处理在App组件的更新，让Footer是纯，因为它是一个无状态组件

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; 

应用

// 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}/> 
     ) 
    } 
}