如何在Reactjs中调用组件？

问题描述

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      activeTab: "add",items: [],}
  }
  handleClick(activeTab) {
    switch (activeTab) {
      case 'add': return <Add/>
      case 'list': return <List />
      case 'pay': return <Pay />
    }
  }
  render() {
    return (
      <div className="App btn-group">
        <Button onClick={this.handleClick.bind(this,'add')}><Add /></Button>
        <Button onClick={this.handleClick.bind(this,'list')}><List /></Button>
        <Button onClick={this.handleClick.bind(this,'pay')}><Pay /></Button>
      </div>
    )
  }
}
export default App;

我希望通过reactjs中的这段代码，当我单击“添加”按钮时，它会向我显示添加组件，但不幸的是，它不起作用。另一方面，当我执行alert（）或console.log（）而不返回组件时，在我的开关中；效果不错。

<Add />列表和付款是组件，我已将其导入到app.js中。

解决方法

您的代码有几个问题。

如果要基于活动的Tab显示组件，则必须维护state变量。我看到您已经设置了初始状态activeTab : "add"，但是尝试在按钮内渲染<Add />组件。这就是为什么它不能按预期工作的原因。您必须单独渲染它。
您的handleClick函数应该可以执行某些操作。不退货。所以在这里，如果您将组件退回开关内将无法使用。您可以在此处更改状态。
您可以使用react的条件渲染功能，根据您的活动标签来渲染所需的组件，如下所示。

这是应该解决我上面提到的问题的完整组件代码

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      activeTab: "add",items: [],}
  }

  handleClick(activeTab) {
    this.setState({activeTab})
  }

  render() {
    return (
      <div>

 
        <div className="App btn-group">
            <Button onClick={this.handleClick.bind(this,'add')}> Add </Button> 
            <Button onClick={this.handleClick.bind(this,'list')}> List </Button>
            <Button onClick={this.handleClick.bind(this,'pay')}> Pay </Button>  
        </div>

        {this.state.activeTab === 'add' &&  <Add /> }
        {this.state.activeTab === 'list' &&  <List /> }
        {this.state.activeTab === 'pay' &&  <Pay /> }
      </div>
    )
  }
}
export default App;

javascript reactjs reactjs