单击React中的按钮时显示组件[重复]

Question

我是个新手。如何只在React中单击按钮后才呈现组件？

我还想知道如何在点击按钮时刷新组件而不刷新整个页面。

var Button = React.createClass({
render: function () {
        return (
           <button type="button">Display</button>

            ); }
});

var EmployeeRow = React.createClass({

    render: function () {
        return (
            <tr>
                  <td>{this.props.item.EmployeeID}</td>
                  <td>{this.props.item.FirstName}</td>
                  <td>{this.props.item.LastName}</td>
                  <td>{this.props.item.Gender}</td>                                                   
              </tr>

            );
    }
});

  var EmployeeTable = React.createClass({

      getInitialState: function(){

          return{
              result:[]
          }
      },
      componentWillMount: function(){

          var xhr = new XMLHttpRequest();
          xhr.open('get', this.props.url, true);
          xhr.onload = function () {
              var response = JSON.parse(xhr.responseText);

              this.setState({ result: response });

          }.bind(this);
          xhr.send();
      },
      render: function(){
          var rows = [];
          this.state.result.forEach(function (item) {
              rows.push(<EmployeeRow key={item.EmployeeID} item={item} />);
          });
          return (
<Button />
  <table className="table">
     <thead>
         <tr>
            <th>EmployeeID</th>
            <th>FirstName</th>
            <th>LastName</th>
            <th>Gender</th>               
         </tr>
     </thead>
      <tbody>
          {rows}
      </tbody>
  </table>

  );
  } });

  ReactDOM.render(<EmployeeTable url="api/Employee/GetEmployeeList" />,
          document.getElementById('grid'))   

Answer 1

我已经建立了一个沙箱来展示你如何做到这一点。

1. 将布尔值设置为false
的状态初始化
2. 基于此布尔值有条件地呈现组件；所以最初组件将显示在DOM
上
3. 关于某些操作(onclick)、setstate关于布尔值的true
4. 组件将在状态更改后重新呈现，现在将显示隐藏的组件（因为布尔值已设置为真)