单击按钮时如何渲染元素:ReactJS

Question

我在您单击按钮时尝试渲染一个段落.

这是我的代码.

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;

在这里,我试图在单击按钮时呈现"你好朋友".但是没有用.

Answer 1

这不是正确的方法,因为它createText是一个事件处理程序,它不会呈现元素,你需要的是"条件呈现元素".

检查文档以获取更多详细信息条件渲染.

脚步:

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' />