Question

我不是ReactJS的进步者或者是高手，我需要帮助的东西很奇怪......

我试图在ReactJS中渲染一个按钮，如果按下该按钮，将呈现一个h1元素。我曾多次尝试这样做，但我从未成功过......

我现在就向您展示我的代码，请在评论中修复...

＆＃13;

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

＆＃13;

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Here is also the fiddle.

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

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

2 个答案: