Attenzione: l'input è un tag di elemento void e non deve avere `children` o utilizzare` props.dangerouslySetInnerHTML`. Verifica il metodo di rendering di null

Question

Sto tentando di visualizzare gli errori nel modulo se la chiamata ajax all'URL del modulo ha esito negativo. Qui di seguito è il mio Admin componente:

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

Il corressponding AdminError componente è:

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

    getDefaultProps: -> 
    errorText: "" 

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

Durante il debug Mi è toccato il valore corretto di @ props.errorText come "e-mail non è valido". Ma non viene visualizzato nella pagina e sto tralasciando questo avviso nella console: "Attenzione: l'input è un tag elemento vuoto e non deve avere children o utilizzare props.dangerouslySetInnerHTML. Controllare il metodo di rendering di null." In allegato è lo screenshot dell'errore e della pagina.

Ho provato a cambiare la componente AdminError come segue, ma non ha funzionato:

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

Quando ho creato un punto di debug alla linea di ritorno dangerouslySetInnerHTML, ho correttamente ottenere il valore di @props.errorText come "email non valida" e valore di marked(@props.errorText.toString()) come "

email non valida

" .. ma il blocco di aiuto per errore non viene ancora visualizzato.

UPDATE: apportato le seguenti modifiche nel componente AdminError

app/beni/javascript/componenti/adminerror.js.coffee

@AdminError = React.createClass 

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

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

e nel componente di amministrazione, ha rilasciato la seguente modifiche al metodo adminform:

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

non ricevere più l'avviso, ma in tead ottenere il seguente errore:

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

Answer 1

Warning: input is a void element tag and must not have children ...

Un dom.inputpotrebbero non avere elementi figlio.

Ma questo codice sta cercando di rendere i messaggi di errore come figli di un 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 

Puoi rendere tali messaggi di errore da qualche altra parte? Ad esempio, come fratelli dell'input: