html組件寫入反應不顯示

Question

此處的代碼在瀏覽器中查看時不顯示工作。

render() { 
    if (this.state.type == "show") { 
     var work = <a className="image" href={this.props.work.path}> 
      <div dangerouslySetInnerHTML={{__html: this.props.work.image}}/> 
      </a> 
      <div className="content"> 
      <h4> 
       <a href={this.props.work.path}> 
       {this.state.title} 
       </a> 
      </h4> 
      <div className="meta"></div> 
      </div> 
      <div className="extra content"> 
      <span className="left floated"> 
       <i aria-hidden="true" className="fa fa-eye pv" /> 
       &nbsp;{this.props.work.impressionist_count}&nbsp; 
       <i className="fa fa-users"/> 
       &nbsp;{this.props.work.collaborators_count}&nbsp;collaborators 
      </span> 
      <span className="right floated"> 
       <div className="i fa fa-pencil-square"></div> 
       <span onClick={()=>this._onEdit(this.props.work)}>&nbsp;Edit</span> 
       <span dangerouslySetInnerHTML={{__html: this.props.work.delete_link}}/> 
      </span> 
      </div> 
    } else if (this.state.type == "edit") { 
      bunch of else codes 
    } 
    return (
     <div className="ui card" key={`work_${this.props.work.id}`}> 
     {work} 
     </div> 
    ); 
    } 

它最初是這樣的，

render() { 
    if (this.state.type == "show") { 
     var work = <div className="ui card"> 
     <a className="image" href={this.props.work.path}> 
      <div dangerouslySetInnerHTML={{__html: this.props.work.image}}/> 
     </a> 
     <div className="content"> 
      <h4> 
      <a href={this.props.work.path}> 
       {this.state.title} 
      </a> 
      </h4> 
      <div className="meta"></div> 
     </div> 
     <div className="extra content"> 
      <span className="left floated"> 
      <i aria-hidden="true" className="fa fa-eye pv" /> 
      &nbsp;{this.props.work.impressionist_count}&nbsp; 
      <i className="fa fa-users"/> 
      &nbsp;{this.props.work.collaborators_count}&nbsp;collaborators 
      </span> 
      <span className="right floated"> 
      <div className="i fa fa-pencil-square"></div> 
      <span onClick={()=>this._onEdit(this.props.work)}>&nbsp;Edit</span> 
      <span dangerouslySetInnerHTML={{__html: this.props.work.delete_link}}/> 
      </span> 
     </div> 
     </div> 
    } else if (this.state.type == "edit") { 
    bunch of else codes 
    } 
    return (
     <div className="ui cards" key={`work_${this.props.work.id}`}> 
     {work} 
     </div> 
    ) 
    } 

所以，當我拿出這是圍繞變量「工作」包裹div.ui.card它停止工作。但是我需要div.ui.card在返回包裝{work}之後處於底部。

我該怎麼做這項工作....？

Answer 1

在反應15和更早的時候，你需要一個包裝元素。所以如果你想從原始位置移除div.ui.card元素，你只能移除className，而不是元素本身。

錯誤：

var Item = <div>Some Text</div> 
      <div>Another div</div> 

正確：

var Item = <div> 
       <div>Some Text</div> 
       <div>Another div</div> 
      </div> 

或遷移反應16