如何在单击按钮时呈现元素：ReactJS答案

【问题标题】：How to render element on click of button: ReactJS如何在单击按钮时呈现元素：ReactJS
【发布时间】：2017-12-26 12:58:41
【问题描述】：

我正在尝试在您单击按钮后立即呈现一个段落。

这是我的代码。

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;

在这里，我试图在单击按钮时呈现“你好朋友”。但不工作。

【问题讨论】：

您的代码无法正常工作，因为您没有在反应 dom 中呈现 <p>hello friend</p>。

标签： javascript reactjs

【解决方案1】：

这不是正确的方法，因为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' />

【讨论】：