我正在尝试在您单击按钮后立即渲染一个段落。
这是我的代码。
import React, { Component } from 'react';
class App extends Component {
constructor() {
super();
this.createText = this.createText.bind(this);
}
createText() {
return(
<p>hello friend</p>
)
}
render() {
return (
<div className="App">
<button onClick={this.createText}>Click</button>
</div>
);
}
}
export default App;
在这里，我试图在单击按钮时呈现“你好朋友”。但不工作。
这不是正确的方法，因为它createText是一个不会呈现元素的事件处理程序，您需要的是“有条件地呈现元素”。
检查文档以获取更多详细信息Conditional Rendering。
脚步：
1- 使用具有初始值的状态变量false。
2-单击按钮将值更新为true。
3- 使用该状态值进行条件渲染。
工作代码：
class App extends React.Component {
constructor() {
super();
this.state = {
isShow: false
}
this.createText = this.createText.bind(this);
}
createText() {
this.setState({ isShow: true })
}
render() {
return (
<div className="App">
<button onClick={this.createText}>Click</button>
{this.state.isShow && <p>Hello World!!!</p>}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'))<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='app' />