Achtung: der Eingang ist ein void-element-tag " und darf keine `Kinder` oder benutze ` - Requisiten.dangerouslySetInnerHTML`. Überprüfen Sie die render-Methode von null
Ich versuche zu Rendern, Fehler in der form, wenn der ajax-Aufruf, um die Formular-URL fehl. Unten ist mein Admin
Komponente:
#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()
Den corressponding AdminError
Komponente:
#app/assets/javascripts/components/adminerror.js.coffee
@AdminError = React.createClass
getDefaultProps: ->
errorText: ""
render: ->
dom.div
className: 'help-block'
@props.errorText
Während des Debuggens erhalte ich den richtigen Wert von @Requisiten.errorText "E-Mail ist ungültig". Aber es ist nicht immer gerendert auf der Seite und ich bin geeting diese Warnung in der Konsole: "Achtung: der Eingang ist ein void-element-tag" und darf nicht children
oder verwenden Sie props.dangerouslySetInnerHTML
. Überprüfen Sie die render-Methode von null."
Anbei der screenshot von beiden die Fehler und die Seite.
Ich versucht, die änderung der AdminError-Komponente wie folgt, aber es hat nicht funktioniert:
#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})
Wenn ich einen debug-Punkt in der Zeile, Rückkehr dangerouslySetInnerHTML, habe ich richtig erhalten den Wert @props.errorText
als "E-Mail ist ungültig", und den Wert marked(@props.errorText.toString())
als "
E-Mail ist ungültig
".. aber immer noch das Hilfe-block für Fehler wird nicht gerendert überhaupt.
UPDATE:
Aus den folgenden änderungen in der AdminError Komponente
app/assets/javascripts/Komponenten/adminerror.js.Kaffee
@AdminError = React.createClass
getDefaultProps: ->
# errorText: ""
errorTexts: []
render: ->
for errorText in @props.errorTexts
dom.div
className: 'help-block'
errorText
und in der Admin-Komponente, folgende änderungen vorgenommen, um die adminform Methode:
if(@state.errorTexts.length>0)
dangerouslySetInnerHTML: {
__html: ReactDOMServer.renderToString(
# for errorText, index in @state.errorTexts
React.createElement AdminError, errorTexts: @state.errorTexts
)
}
nicht immer die Warnung mehr, sondern stattdessen immer die folgende Fehlermeldung:
Uncaught Invariant Violation: ReactCompositeComponent.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.
InformationsquelleAutor vipin8169 | 2016-03-12
Du musst angemeldet sein, um einen Kommentar abzugeben.
Einen
dom.input
kann nicht untergeordneten Elemente.Aber dieser code versucht zu Rendern, error-Meldungen, die als Kinder von einem
dom.input
:Können Sie das Rendern, diese Fehlermeldungen irgendwo anders? Zum Beispiel, als Geschwister der Eingabe:
Dank einer Tonne Mann, dass es wirklich funktioniert. Ich bin dir dankbar, ich war immer Legastheniker über diesen Fehler im Laufe der Zeit :p
you made my day 😀
Sehr gute Lösung @rmosolgo Sie schnell und einfach repariert meine ist ein void-element-tag " und darf nicht
children
oder verwenden Sieprops.dangerouslySetInnerHTML
. Überprüfen Sie die render-Methode von nullInformationsquelleAutor rmosolgo