警告:输入是一个空元素标签，不能有 `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

问题描述

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

I am trying to render the errors in the form if the ajax call to the form URL fails. Below is my Admin component:

#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 的渲染方法."附件是错误和页面的屏幕截图.

While debugging I am getting the correct value of @props.errorText as "email is invalid". But it is not getting rendered on the page and I am geeting this warning in console: "Warning: input is a void element tag and must not have children or use props.dangerouslySetInnerHTML. Check the render method of null." Attached is the screenshot of both the error and the page.

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

I tried changing the AdminError component as follows, but it didn't work:

#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})

当我在返回 dangerouslySetInnerHTML 的行处设置调试点时，我正确地获得了 @props.errorText 的值，因为电子邮件无效"marked(@props.errorText.toString()) 的值为

email is invalid

When I set a debug point at the line returning dangerouslySetInnerHTML, I correctly get the value of @props.errorText as "email is invalid" and value of marked(@props.errorText.toString()) as "

email is invalid

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

UPDATE: Made the following changes in the AdminError component

@AdminError = React.createClass

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

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

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

and in the Admin component, made the following changes to the adminform method:

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

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

not getting the warning anymore, but instead getting the following error:

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

推荐答案

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

dom.input 可能没有子元素.

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

But this code is trying to render error messages as children of a 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

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

Can you render those error messages somewhere else? For example, as siblings of the input:

  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

这篇关于警告:输入是一个空元素标签，不能有 `children` 或使用 `props.dangerouslySetInnerHTML`.检查 null 的渲染方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！