单击按钮时在函数内调用 React 组件

Question

Container 组件没有被渲染。谁能指导我为什么我无法渲染 Container 组件？

应用程序.js

 import React, { Component } from "react";
import "./App.css";
import Container from "./Container";

class App extends Component {
  add() {
    return <Container />;
  }
  render() {
    return (
      <div className="App">
        <button onClick={() => this.add()}>CLICK</button>
      </div>
    );
  }
}

export default App;

容器.js

 import React, { Component } from "react";

export default class Container extends Component {
 render() {
   return <h1>hello</h1>;
  }
}

原文由 srinivas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以设置状态并在单击按钮时渲染组件

import React, { Component } from "react";
 import "./App.css";
 import Container from "./Container";

 class App extends Component {
  state = {
     addContainer: []
  }
  add() {
     this.setState(prevState => {addContainer: prevstate.addContainer.concat([0])})
  }
 render() {
  return (
   <div className="App">
     {this.state.addContainer.map(() => {
         return <Container />
     })}
     <button onClick={() => this.add()}>CLICK</button>
   </div>
  );
 }
}

export default App;

或者如果它只是一个容器，您想要在按钮单击时切换其可见性

 import React, { Component } from "react";
 import "./App.css";
 import Container from "./Container";

 class App extends Component {
  state = {
     addContainer: false
  }
  add() {
     this.setState(prevState => {addContainer: !prevstate.addContainer)})
  }
 render() {
  return (
   <div className="App">
     {this.state.addContainer &&  <Container />}
     <button onClick={() => this.add()}>CLICK</button>
   </div>
  );
 }
}

export default App;

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 4.0 许可协议