Javascript 如何在父App.js中获取导航栏子组件状态？

TL；DR：我想把点击结果从导航栏组件传递给它的父应用程序组件

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

我有一个

Navbar.js

，它在

App.js

中呈现，并且Navbar上有几个选项卡。在

App.js

中，还有几个

Card.js

组件根据导航栏上的点击事件呈现，例如，用户点击导航栏上的“食物，

App.js

应显示所有“食物”卡。现在在

App.js

中，我想知道在导航栏上单击了哪个选项卡。以下是一些代码：

Navbar.js（子组件）

类导航栏扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={currentTab:null}；
this.findTab=this.findTab.bind（this）；
}
findTab（）{
this.setState（{currentTab:'Food'}）//单击此处，navbar的状态设置为'Food'
}
render（）{
返回(
this.findTab（tab）}>
)
}
}

App.js（父组件）：

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={currentCategory:null}；
this.renderCards=this.renderCards.bind（this）；
}
renderCards（）{
const category='Food'//这里我需要知道在Navbar.item上，用户单击并将状态设置为'Food'，这样我就可以将category='Food'
this.setState（{currentCategory:category}）；
}
render（）{
返回(
)
}
}

---

正如您所看到的，我已经在单击时将

Navbar.js

状态设置为“食物”，我不确定这是否是将数据传递给其父级的正确方法。

好吧，据我所知，只需在Navbar.js组件中将renderCards（）作为道具传递，就可以轻松处理这种情况

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

有关道具以及如何使用道具的更多详细信息，请浏览Reactjs文档。

下面是您需要做的更改，以实现App.js渲染右卡

在Navbar.js中 你必须使用这个.props.renderCards（'Food'）Onclick。代替“食物”，你可以通过不同的类别

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

类导航栏扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={currentTab:null}；
this.findTab=this.findTab.bind（this）；
}
//我们不需要findTab方法来实现renderCard（）。
findTab（）{
this.setState（{currentTab:'Food'}）//单击此处，navbar的状态设置为'Food'
}
render（）{
返回(
this.props.renderCards（'Food'）}>
)
}
}

在App.js中

将this.renderCards（）作为道具传递到导航栏组件中

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

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={currentCategory:null}；
this.renderCards=this.renderCards.bind（this）；
}
渲染卡（类别）{
//在这里，我们将获得实际类别作为方法的参数。
this.setState（{currentCategory:category}）；
}
render（）{
返回(
)
}
}

---

小结：道具是将数据从孩子传递给家长或从家长传递给孩子的最佳方式。

谢谢！你是对的，我只知道道具可以将数据从父组件传递到子组件，不知道它也可以从子组件传递到父组件。