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