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

我试图在您单击按钮后立即呈现段落

这是我的密码

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;

import React，{Component}来自'React'；
类应用程序扩展组件{
构造函数（）{
超级（）；
this.createText=this.createText.bind（this）；
}
createText（）{
返回(
你好，朋友

)
}
render（）{
返回(
点击
);
}
}
导出默认应用程序；

---

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

这不是正确的方法，因为

createText

是一个事件处理程序，它不会呈现元素，您需要的是“元素的条件呈现”

查看文档以了解更多详细信息

步骤：

1-使用具有初始值的状态变量

false

2-单击按钮将值更新为

true

3-将该状态值用于条件呈现

工作代码：

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
伊莎：错
}
this.createText=this.createText.bind（this）；
}
createText（）{
this.setState（{isShow:true}）
}
render（）{
返回(
点击
{this.state.isShow&&你好，世界！！！
}
);
}
}
ReactDOM.render（，document.getElementById（'app'））

---

您的代码不起作用，因为您没有在您的dom中呈现

hello friend

。