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时，＃34; work＆＃34;它停止了工作。但是我需要在返回包装{work}之后将div.ui.card放在底部。

我怎么能做这个工作......？

Answer 1

在15和更早的反应中，你需要一个包装元素。因此，如果要从原始位置删除div.ui.card元素，则只能删除className，而不是元素本身。

错：

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

正确：

  document.getElementById('button').onclick = duplicate;
  var i = 0;
  var original = document.getElementById('duplicater');
  function duplicate() {
      var clone = original.cloneNode(true); 
      clone.id = "duplicetor" + ++i; 
      original.parentNode.appendChild(clone);
  }

或迁移到React 16

写的html组件反应不显示

1 个答案: