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;

在这里，我试图渲染＆＃34;你好朋友＆＃34;单击按钮时。但是没有用。

Answer 1

这不是正确的方法，因为createText是一个事件处理程序，它不会呈现元素，你需要的是＆＃34;条件呈现元素＆＃34;。

查看文档以获取更多详细信息Conditional Rendering。

<强>步骤：

1-使用初始值为false的状态变量。

2-点击按钮将值更新为true。

3-将该状态值用于条件渲染。

工作代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: