Question

Container组件未呈现。谁能指导我为什么我无法渲染Container组件？

App.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;

Container.js

import React, { Component } from "react";

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

Answer 1

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

或者如果它只是您要在按钮上显示可见性的单个容器，则单击

git describe --tags --first-parent --abbrev=0 master

Answer 2

您的函数未呈现，因为方法add()的返回不在您的render()方法内。它位于onClick()内部，因此不会渲染。尝试像下面的代码段一样

：

class Container extends React.Component {
    render(){
      return <h1> Hello World </h1>
    }
}

class App extends React.Component {
  state= { render: false }
  add = () => {
    this.setState({render : !this.state.render})
  }
 render() {
  return (
   <div className="App">
     <button onClick={() => this.add()}>CLICK</button>
     { this.state.render &&
        <Container/>
     }
   </div>
  );
 }
}

ReactDOM.render(<App/>,document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

您甚至可以像上面一样切换<Container>呈现，但是您不能在onClick内返回Component并期望将其呈现。

Answer 3

只需在要渲染组件的函数中更改this.state即可。 this.setState（{addContainer：true}） 通常在render（）函数中渲染所有组件，当状态改变时，您的组件将自动被渲染。

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

3 个答案: