#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,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.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的正确值为“email is invalid”.但它没有在页面上呈现,我在控制台中发出警告：“警告：输入是一个void元素标记,不能有子节点或使用props.dangerouslySetInnerHTML.请检查null的render方法.”
附件是错误和页面的屏幕截图.

我尝试更改AdminError组件,如下所示,但它不起作用：

#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的值设为“email is invalid”,并将标记的值(@ props.errorText.toString())设置为“email is invalid”.但仍然没有呈现错误的帮助块.

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

应用程序/资产/ Java脚本/组件/ adminerror.js.coffee

@AdminError = React.createClass

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

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

在Admin组件中,对adminform方法进行了以下更改：

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

没有得到警告,而是得到以下错误：

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