如何在 ReactJS 中使用 Button 渲染 HTML h1？答案

【问题标题】：How do I render an HTML h1 with a Button in ReactJS?如何在 ReactJS 中使用 Button 渲染 HTML h1？
【发布时间】：2017-06-26 06:03:25
【问题描述】：

我不是 ReactJS 高级或大师，我需要一些奇怪的帮助...

我正在尝试在 ReactJS 中呈现一个按钮，如果按下该按钮，将呈现一个 h1 元素。我尝试了无数次，但我从未成功....

我现在将向您展示我的代码，请在 cmets 中修复它...

var React = require('react');
var ReactDOM = require('react-dom');

var Button = React.createClass({
    handleClick: function () {
        return <h1>Hello World</h1>;
    },
    
    render: function () {
        return <button onClick={this.handleClick}>Press Me</button>;
    }
});

ReactDOM.render(<Button />, document.getElementById('root'));

希望你能回复我。我非常需要帮助，这里需要一些合乎逻辑的帮助。谢谢。

【问题讨论】：

请通过这个facebook.github.io/react/docs/conditional-rendering.html

标签： javascript html reactjs

【解决方案1】：

您可以添加一个状态来控制需要显示或隐藏的标题。如下：

class Test extends React.Component {
		constructor(props){
    	super(props);
      
      this.state = {
      	toggleHeader: false
      }
    }
    
    render () {
        return (
        	<div>
          	{this.state.toggleHeader ? <h1>Hello World</h1> : ""}
          	<button onClick={() => this.setState({toggleHeader: !this.state.toggleHeader})}>
            	{this.state.toggleHeader ? "Hide header" : "Show header"}
            </button>
          </div>
        );
    }
}

React.render(<Test />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="container"></div>

Here is also the fiddle.

【讨论】：

【解决方案2】：

这是一个基本案例，所以我建议您获取一些教程或更好地阅读文档。

class Button extends React.Component{
        constructor(){
            super();
        this.handleClick = this.handleClick.bind(this);
        this.state = {
                    isActive: false
        }
    }
    handleClick(){
            this.setState({isActive: !this.state.isActive})
    }
    render(){
            return(
                <div>
                    <button onClick={this.handleClick}>Press Me</button>
                {this.state.isActive? <h1>Hello World</h1> : null}
            </div>
        );
    }
}


ReactDOM.render(<Button />, document.getElementById('container'));

https://jsfiddle.net/69z2wepo/81695/

【讨论】：