Javascript 如何在Reactjs中调用组件？ 类应用程序扩展了React.Component{ 构造函数（）{ 超级（）； 此.state={ activeTab：“添加”， 项目：[]， } } handleClick（活动选项卡）{ 开关（activeTab）{ 案例“添加”：返回 案例“列表”：返回 个案"薪酬:报税表 } } render（）{ 返回( ) } } 导出默认应用程序；

我希望通过reactjs中的这段代码，当我单击“add”按钮时，它会显示add组件，但不幸的是，它不起作用。另一方面，在我的交换机中，当我执行alert（）或console.log（）而不是返回组件时；它本应该工作得很好

---

列表和支付是组件，我已经导入到app.js中。

您的代码有几个问题

如果要基于活动选项卡显示组件，则必须维护状态变量。我看到您已经设置了初始状态

activeTab:“添加”

，但试图在按钮内呈现

组件。这就是为什么它不能像预期的那样工作。您必须单独渲染它

你的handleClick函数应该做些什么。不归还东西。所以在这里，如果你返回你的组件在开关内，将无法工作。你可以在这里改变状态

可以使用react的条件渲染功能，根据活动选项卡渲染所需组件，如下所示

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

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;

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
activeTab：“添加”，
项目：[]，
}
}
handleClick（活动选项卡）{
this.setState（{activeTab}）
}
render（）{
返回(
添加
列表
支付
{this.state.activeTab=='add'&&}
{this.state.activeTab==='list'&&}
{this.state.activeTab==='pay'&&}
)
}
}
导出默认应用程序；

您想通过退回组件做什么？这是否回答了您的问题？显示组件内容非常感谢您的帮助，解决了我的问题！

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;