Attention: l'entrée est une balise d'élément vide et ne doit pas avoir des "enfants" ou utiliser " les accessoires.dangerouslySetInnerHTML`. Vérifier la méthode de rendu de null

Je suis en train d'essayer de rendre les erreurs dans la forme, si l'appel ajax à l'URL du formulaire échoue. Ci-dessous mon Admin composant:

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

La corressponding AdminError composant est:

#app/assets/javascripts/components/adminerror.js.coffee
@AdminError = React.createClass
getDefaultProps: ->
errorText: ""
render: ->
dom.div
className: 'help-block'
@props.errorText

Pendant le débogage, j'obtiens la valeur correcte de @accessoires.texteerreur que "l'e-mail n'est pas valide". Mais il n'est pas affiché dans la page et je suis geeting cet avertissement dans la console: "attention: l'entrée est une balise d'élément vide et ne doit pas avoir children ou de l'utilisation props.dangerouslySetInnerHTML. Vérifier la méthode de rendu de null."
Ci-joint la capture d'écran à la fois de l'erreur et la page.

J'ai essayé de changer les AdminError composant comme suit, mais il ne fonctionne pas:

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

Lorsque j'ai mis un debug point à la ligne retour dangerouslySetInnerHTML, j'ai correctement obtenir la valeur de @props.errorText que "l'e-mail n'est pas valide" et de la valeur de marked(@props.errorText.toString()) "

e-mail n'est pas valide

".. mais encore l'aide à bloc pour l'erreur n'est pas rendu à tous.

Mise à JOUR:
Faites les modifications suivantes dans le AdminError composant

app/assets/javascripts/composants/adminerror.js.café

@AdminError = React.createClass
getDefaultProps: ->
#    errorText: ""
errorTexts: []
render: ->
for errorText in @props.errorTexts
dom.div
className: 'help-block'
errorText

et dans le composant Admin, a apporté les modifications suivantes à la adminform méthode:

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

de ne pas obtenir de l'avertissement, mais au lieu d'obtenir l'erreur suivante:

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

OriginalL'auteur vipin8169 | 2016-03-12