1
我有栈测试环境:测试:'错误:违反不变:addComponentAsRefTo(...):只有ReactOwner可以refs.`错误
- CoffeeScript的
- 反应(+ JSX)
- 因缘
- phantomjs
- 茉莉
我有这个恼人的错误当我试图只是为了呈现组件:
PhantomJS 2.0.0 (Linux 0.0.0) NewSession should send the query after clicking on the button FAILED
Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref. in /tmp/35ffb917aab483a567d1be6fed779291.browserify (line 38759)
下面是测试文件
React = require('react')
ReactBootstrap = require('react-bootstrap')
Row = ReactBootstrap.Row
Col = ReactBootstrap.Col
Input = ReactBootstrap.Input
Button = ReactBootstrap.Button
WebUtils = require('../../web_utils.coffee')
SessionActions = require('../../actions/session_actions.coffee')
ErrorMessage = require('../error_message.coffee')
module.exports = React.createClass
contextTypes: router: React.PropTypes.func
getInitialState: ->
{ error_text: '' }
handleSubmit: (e) ->
e.preventDefault()
WebUtils.query
path: 'sessions'
data: @getFormData()
type: 'POST'
callback: ((result) ->
if result.status == 'success'
SessionActions.create(result)
@context.router.transitionTo('/')
else
@setState error_text: 'Неправильные логин и/или пароль'
).bind(this)
getFormData: ->
{
login: @refs.login.getValue(),
password: @refs.password.getValue()
}
render: ->
<form onSubmit={@handleSubmit}>
<Row>
<Col md={6} mdOffset={3} className='text-center'>
<h3>Войти в систему</h3>
{ <ErrorMessage text={@state.error_text} /> if [email protected]_text }
<Input type='text' placeholder='Введите Ваш логин' ref='login' autoFocus />
<Input type='password' placeholder='Пароль' ref='password' />
<Button type='submit' bsStyle='success'>Вход</Button>
</Col>
</Row>
</form>
有测试:
React = require('react/react-with-addons.js')
ReactTestUtils = React.addons.TestUtils
NewSession = require('../../../../app/coffee/components/sessions/new.coffee')
describe 'NewSession', ->
it 'should send the query after clicking on the button', ->
ReactTestUtils.renderIntoDocument(<NewSession />) # here comes the error
错误信息来源:
React = require('react')
ReactBootstrap = require('react-bootstrap')
Alert = ReactBootstrap.Alert
module.exports = React.createClass
render: ->
<Alert bsStyle='danger' bsSize='small' className='text-left'>{@props.text}</Alert>
我该如何避免这个错误要么?
可以粘贴的ErrorMessage源? –
@ plus-,我已添加。 – asiniy
我不是咖啡家庭,但是{{ErrorMessage text={@state.error_text} /> if [email protected]_text}'对我来说很奇怪。 您不应该在没有IIFE的情况下在JSX中运行内联条件。见https://facebook.github.io/react/tips/if-else-in-JSX.html 你可以尝试没有这部分?你仍然有同样的错误? –