隐藏嵌套在React组件中的HTML元素

Question

我有一个表格，显示为从前端通过表单对我的后端进行API调用的结果。问题是为每行数据生成标题，从而创建冗余。

我查看了refs作为访问HTML元素的方法。

    var BountyHunters = React.createClass({
       state : {toggleClass: true},
        getInitialState: function(){
          return({
            bountyHunters: []
          })
        },
        render: function () {
        var bountyHunters = this.state.bountyHunters
            bountyHunters = bountyHunters.map(function(bountyHunter, index){
             return (

              <tbody key={index}>
                <tr>
                  <td><span className={bountyHunter.obj.available}></span></td>
                  <td className="name">{bountyHunter.obj.name}</td>
                  <td className="rank">{bountyHunter.obj.rank}</td>
                  <td className="dist">{Math.floor(bountyHunter.dis /  1000)} km</td>
                </tr>
              </tbody>
             )
           })
            return(
              <div className="container">
                <div className="sixteen columns">
                  <div id="bountyhunter-container">
                    <form id="search" onSubmit= {this.handleSubmit}>
                      <label>Enter your latitude</label>
                      <input type="text" ref="lat" placeholder="latitude" requried/>
                      <label>Enter your longitude</label>
                      <input type="text" ref="lng" placeholder="longitude" requried/>
                      <input type="submit" className="button-primary" value="Find Bounty Hunters"/>
                    </form>
                    <table className="u-full-width">
                    <thead ref="thead">
                        <tr>
                          <th>Availability</th>
                          <th>Name</th>
                          <th>Bounties Claimed</th>
                          <th>Distance from you</th>
                        </tr>
                      </thead>
                      {bountyHunters}
                    </table>
                  </div>
                </div>
              </div>

            );
        },
        handleSubmit: function(e){
          e.preventDefault();
          var lng = this.refs.lng.value;
          var lat = this.refs.lat.value;
          this.refs.thead.style = 'block';

          fetch('/api/bountyHunters?lng=' + lng + '&lat=' + lat)
            .then(function(data){
              return data.json()
            }).then(json => {
              this.setState({
                 bountyHunters: json
              })
              console.log(json);
            });
        }
    });

    ReactDOM.render(<BountyHunters/>, document.getElementById('bountyHunters'))

因此，您可以看到我在ref标记中创建或使用了<thead>属性，然后在handleSubmit函数

中使用了该属性

this.refs.thead.style.display = 'block';

我相信虽然这会导致翻录thead元素上的所有其他属性并仅使用display: block属性和值替换它们。

所以我的问题是： 这是你用refs做这个的方式吗？ 我专门研究了许多add/remove类方法，因为我知道他们需要做很多DOM安装生命周期问题。但是对所有必须经历的箍都有点惊讶。 有人可以指导我做什么是最好的/ React-ish方法吗？

提前致谢] 1

更新 我实际发布了代码，试图隐藏然后显示thead标签的显示属性。我描述的行为是在thead方法中返回render。