4

组件未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>;
  }
}
4

3 回答 3

4

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

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;
于 2018-07-03T13:17:43.817 回答
3

您的函数未呈现，因为您的方法的返回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 中返回一个组件并期望它会被渲染。

于 2018-07-03T13:22:07.093 回答
0

只需在要渲染组件的函数中更改 this.state 即可。 this.setState({ addContainer: true }) 在 render() 函数中正常渲染所有组件，当状态改变时，你的组件会自动渲染。

于 2019-04-07T04:38:16.207 回答