Ruby on rails 4 警告:输入是一个空元素标记,不能有'children'或使用'props.dangerouslysetinerhtml'。检查null的render方法
如果对表单URL的ajax调用失败,我将尝试在表单中呈现错误。下面是我的Ruby on rails 4 警告:输入是一个空元素标记,不能有'children'或使用'props.dangerouslysetinerhtml'。检查null的render方法,ruby-on-rails-4,coffeescript,react-rails,Ruby On Rails 4,Coffeescript,React Rails,如果对表单URL的ajax调用失败,我将尝试在表单中呈现错误。下面是我的Admin组件: #app/assets/javascripts/components/admin.js.coffee @Admin = React.createClass # propTypes: -> # emailVal: React.PropTypes.string.isRequired getInitialState: -> edit: false errorTexts:
Admin
组件:
#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()
相应的AdminError
组件为:
#app/assets/javascripts/components/adminerror.js.coffee
@AdminError = React.createClass
getDefaultProps: ->
errorText: ""
render: ->
dom.div
className: 'help-block'
@props.errorText
调试时,我得到了@props.errorText的正确值,即“电子邮件无效”。但是它没有在页面上呈现,我在控制台中看到了这个警告:“警告:输入是一个无效的元素标记,不能有子元素或使用道具。危险的是,请检查null的呈现方法。”
附件是错误和页面的截图。
我尝试按如下方式更改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})
当我在返回危险的LySetinerHTML的行上设置调试点时,我正确地将@props.errorText
的值设置为“email is invalid”,将的值标记为(@props.errorText.toString())
作为“email is invalid”。。但仍然没有呈现错误的帮助块
更新:
在AdminError组件中进行了以下更改
app/assets/javascripts/components/adminerror.js.coffee
在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.
警告:输入是一个无效的元素标记,不能有子元素
dom.input
可能没有子元素
但此代码正试图将错误消息呈现为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
你能把这些错误信息呈现在别的地方吗?例如,作为输入的同级:
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
这听起来很有说服力,在这上面浪费了一整天。让我试试,谢谢!多谢了,真的很管用。我很感谢你,随着时间的推移,我对这个错误越来越难以理解:pyou为我的一天制定了非常好的解决方案@rmosolgo,你很容易地修复了我的是一个无效元素标签,不能有孩子或使用道具。危险的LysetinerHTML
。检查null的render方法
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