单击按钮时如何渲染元素：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' />