警告：输入是一个空元素标签，不能有 `children` 或使用 `props.dangerouslySetInnerHTML`。检查 null 的渲染方法

Posted 2023-03-03

【中文标题】警告：输入是一个空元素标签，不能有 `children` 或使用 `props.dangerouslySetInnerHTML`。检查 null 的渲染方法

【英文标题】：Warning: input is a void element tag and must not have `children` or use `props.dangerouslySetInnerHTML`. Check the render method of null

【发布时间】：2016-06-27 15:47:51

【问题描述】：

如果对表单 URL 的 ajax 调用失败，我会尝试在表单中呈现错误。下面是我的Admin 组件：

#app/assets/javascripts/components/admin.js.coffee
@Admin = React.createClass
#  propTypes: ->
#    emailVal: React.PropTypes.string.isRequired

  getInitialState: ->
    edit: false
    errorTexts: []

  handleToggle: (e) ->
    e.preventDefault()
    @setState edit: !@state.edit
    @setState errorTexts: []

  handleDelete: (e) ->
    e.preventDefault()
    # yeah... jQuery doesn't have a $.delete shortcut method
    $.ajax
      method: 'DELETE'
      url: "/admins/# @props.admin.id "
      dataType: 'JSON'
      success: () =>
        @props.handleDeleteAdmin @props.admins

  handleEdit: (e) ->
    e.preventDefault()
    data = email: ReactDOM.findDOMNode(@refs.email).value
    # jQuery doesn't have a $.put shortcut method either
    $.ajax
      method: 'PUT'
      async: false
      url: "/admins/# @props.admin.id "
      dataType: 'JSON'
      data:
        admin: data
      error: (data, status, xhr) =>
        errorTexts = []
        for key, value of data.responseJSON
          errorText = "#key #value.toString()"
          errorTexts.push errorText
        @replaceState errorTexts: errorTexts
        @setState edit: true
      success: (data, status, xhr) =>
        @setState edit: false
        @props.handleEditAdmin @props.admin, data

  adminRow: ->
    dom.tr null,
      dom.td null, @props.admin.email
      dom.td null,
        dom.a
          className: 'btn btn-default'
          onClick: @handleToggle
          'Edit'
        dom.a
          className: 'btn btn-danger'
          onClick: @handleDelete
          'Delete'

  adminForm: ->
    dom.tr null,
      dom.td null,
        dom.input
          className: 'form-control'
          type: 'text'
          defaultValue: @props.admin.email
          ref: 'email'
          for errorText, index in @state.errorTexts
            React.createElement AdminError, key: index, errorText: errorText
      dom.td null,
        dom.a
          className: 'btn btn-default'
          onClick: @handleEdit
          'Update'
        dom.a
          className: 'btn btn-danger'
          onClick: @handleToggle
          'Cancel'

  render: ->
    if @state.edit
      @adminForm()
    else
      @adminRow()

对应的AdminError组件是：

#app/assets/javascripts/components/adminerror.js.coffee
@AdminError = React.createClass

  getDefaultProps: ->
    errorText: ""

  render: ->
    dom.div
      className: 'help-block'
      @props.errorText

在调试时，我得到了 @props.errorText 的正确值，因为“电子邮件无效”。但它没有在页面上呈现，我在控制台中收到此警告：“警告：输入是无效元素标记，不能有 children 或使用 props.dangerouslySetInnerhtml。检查 null 的呈现方法。” 附件是错误和页面的屏幕截图。

我尝试如下更改 AdminError 组件，但没有成功：

#app/assets/javascripts/components/adminerror.js.coffee
@AdminError = React.createClass

  getDefaultProps: ->
    errorText: ""

  render: ->
    dom.div
      className: 'help-block'
      dangerouslySetInnerHTML: __html: marked(@props.errorText.toString(), saitize: true)

当我在返回危险SetInnerHTML 的行设置调试点时，我正确地将@props.errorText 的值作为“电子邮件无效”，将marked(@props.errorText.toString()) 的值作为“

email is invalid

".. 但仍然没有显示错误的帮助块。

更新： 在 AdminError 组件中进行了以下更改

app/assets/javascripts/components/adminerror.js.coffee

@AdminError = React.createClass

  getDefaultProps: ->
#    errorText: ""
    errorTexts: []

  render: ->
    for errorText in @props.errorTexts
      dom.div
        className: 'help-block'
        errorText

并在 Admin 组件中，对 adminform 方法进行了以下更改：

if(@state.errorTexts.length>0)
            dangerouslySetInnerHTML: 
              __html: ReactDOMServer.renderToString(
  #              for errorText, index in @state.errorTexts
                React.createElement AdminError, errorTexts: @state.errorTexts
              )
            

不再收到警告，而是收到以下错误：

Uncaught Invariant Violation: ReactCompositeComponent.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

【参考方案1】：

警告：输入是一个空元素标签，不能有children ...

dom.input可能没有有子元素。

但此代码试图将错误消息呈现为 dom.input 的子级：

  dom.td null,
    dom.input
      className: 'form-control'
      type: 'text'
      defaultValue: @props.admin.email
      ref: 'email'
      # These are being rendered as children of the input: 
      for errorText, index in @state.errorTexts
        React.createElement AdminError, key: index, errorText: errorText

您可以在其他地方呈现这些错误消息吗？例如，作为输入的兄弟：

  dom.td null,
    dom.input
      className: 'form-control'
      type: 'text'
      defaultValue: @props.admin.email
      ref: 'email'
    for errorText, index in @state.errorTexts
      React.createElement AdminError, key: index, errorText: errorText

【讨论】：

这听起来很有说服力，浪费了一整天的时间。让我试试，谢谢！

非常感谢，它确实有效。我很感激你，随着时间的流逝，我对这个错误变得阅读障碍：p

你成就了我的一天：D

很好的解决方案@rmosolgo，你很容易修复我是一个空元素标签，不能有children或使用props.dangerouslySetInnerHTML。检查 null 的渲染方法