javascript - 如何在单击按钮 : 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;

在这里，我试图在单击按钮时呈现“你好 friend ”。但是不起作用。

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