Question

在反应的render方法中，我试图在状态变量的基础上渲染一些孩子。下面引用的是相同的代码片段：

  render: ->
    if @state.edit
      @adminForm()
    else
      @adminRow()
    if @state.showModal
      React.createElement AdminDeleteModal, email: @props.admin.email, handleOK: @handleDelete, handleCancelDelete: @hidePopUpModal

这导致我出错："Uncaught Invariant Violation: ReactCompositeComponent.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object."

但是，当我将AdminDeleteModal的渲染部分移动到@adminRow（）方法的末尾时，它可以工作：

  adminRow: ->
    dom.tr
      className: 'row'
      dom.td
        className: "col-md-6"
        @props.admin.email
      dom.td
        className: "col-md-6 text-right"
        dom.a
          className: 'glyphicon glyphicon-edit text-primary'
          onClick: @handleToggle
        dom.a
          className: 'glyphicon glyphicon-trash text-danger deletethis'
          data: { title: 'Delete Admin?' ,confirm: "Are you sure you want to delete User #{@props.admin.email}?"}
          onClick: @showPopUpModal
      if @state.showModal
        React.createElement AdminDeleteModal, email: @props.admin.email, handleOK: @handleDelete, handleCancelDelete: @hidePopUpModal

尽管如此，这会产生另一个问题，即div内部有div，导致以下警告：

Warning: validateDOMNesting(...): <div> cannot appear as a child of <tr>. See (unknown) > tr > (unknown) > div.

更新：使用以下建议更新了代码

  render: ->
    if @state.edit
      @adminForm()
    else
      @adminRow()
    if @state.showModal
      dom.tr null,
        dom.td null,
          React.createElement AdminDeleteModal, email: @props.admin.email, handleOK: @handleDelete, handleCancelDelete: @hidePopUpModal

Uncaught Invariant Violation：ReactCompositeComponent.render（）：必须返回有效的ReactComponent

0 个答案: