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
Vous devez vous connecter pour publier un commentaire.
Un
dom.input
peut pas ont des éléments d'enfant.Mais ce code est d'essayer de rendre les messages d'erreur comme les enfants d'un
dom.input
:Pouvez-vous rendre ces messages d'erreur quelque part d'autre? Par exemple, comme les frères et sœurs de l'entrée:
Merci de ton homme, il a vraiment travaillé. Je suis reconnaissant à vous, j'étais dyslexique au cours de cette erreur avec le passage du temps :p
vous avez fait ma journée 😀
Très bonne solution @rmosolgo, Vous fixe facilement à mon est une balise d'élément vide et ne doit pas avoir
children
ou de l'utilisationprops.dangerouslySetInnerHTML
. Vérifier la méthode de rendu de nullOriginalL'auteur rmosolgo