如何获取父App.js中的navbar子组件state？

Question

TL;DR: I'd like to pass click result from Navbar component to its parent App component.

I have a Navbar.js which is rendered in App.js , and the navbar has several tabs on it. In App.js there are also several Card.js component rendered based on click event on the navbar, eg a user clicks 'Food' on navbar, App.js should show all 'Food' cards. Now in App.js , I'd like to know which tab has been clicked on navbar. Here are some code:

Navbar.js (the child component)

class Navbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {currentTab: null};
    this.findTab = this.findTab.bind(this);
  }
  findTab(){
    this.setState({currentTab: 'Food'}) // here onClick the state of navbar is set to 'Food'
  }
  render(){
    return (
      <Navbar>
        <Navbar.item onClick={() => this.findTab(tab)}>
        </Navbar.item>
      </Navbar>
    )
  }
}

App.js (the parent component):

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {currentCategory: null};
    this.renderCards = this.rendercards.bind(this);
  }
  renderCards(){
    const category = 'Food' // here I need to know on Navbar.item, user clicked and set the state to 'Food', so I can make category = 'Food'
    this.setState({currentCategory: category});
  }
  render(){
    return(
      <Navbar />
      <Card currentCategory={this.state.currentCategory} />
    )
  }
}

As you can see I have made the Navbar.js state to 'Food' on click, I'm not sure if this is the correct way to pass data to its parent.

Answer 1

Well, As per my understanding this situation can be easily handled by simply passing renderCards() as props in Navbar.js component.

For more details on props and how to use them please go through the Reactjs docs. Components and props

Below are the changes you need to do to achieve App.js render right card.

In Navbar.js you have to take use this.props.renderCards('Food') Onclick. In place of 'Food' you can pass diffrent categories.

class Navbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {currentTab: null};
    this.findTab = this.findTab.bind(this);
  }
//we do not need findTab method to achieve your renderCard().
  findTab(){
    this.setState({currentTab: 'Food'}) // here onClick the state of navbar is set to 'Food'
  }
  render(){
    return (
      <Navbar>
        <Navbar.item onClick={() => this.props.renderCards('Food')}>
        </Navbar.item>
      </Navbar>
    )
  }
}

In App.js

You Pass the this.renderCards() as props in Navbar component.

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {currentCategory: null};
    this.renderCards = this.rendercards.bind(this);
  }
  renderCards(category){
  // here we will get the actual category as a parameter of the method.
    this.setState({currentCategory: category});
  }
  render(){
    return(
      <Navbar renderCards={this.renderCards} />
      <Card currentCategory={this.state.currentCategory} />
    )
  }
}

Summary: props are the best way to pass the data from child to parent or parent to child.