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>;
}
}
您可以设置状态并在按钮单击时渲染组件
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;
你的函数没有渲染,因为你的方法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并期望它将被渲染。
只需在要渲染组件的函数中更改this.state即可。 this.setState({addContainer:true})通常在render()函数中渲染所有组件,当状态发生变化时,组件将自动呈现。