Ошибка использования ссылок в React 0.14.8

Я работаю над извлечением кода из своего приложения в пакет с открытым исходным кодом. И мое приложение, и мой пакет зависят от одной и той же версии React, 0.14.8.

С тех пор, как я переместил код в пакет (и внес некоторые изменения в код), я не смог отрендерить компонент, использующий refs. Я часами искал совет, и он дал два основных совета:

1. Убедитесь, что версии реакции не конфликтуют
2. Убедитесь, что компонент с refs создан в методе рендеринга другого компонента.

Насколько я могу судить, я удовлетворил обоим критериям.

class RangeQuery extends React.Component {
  static propTypes = {
    header: PropTypes.object.isRequired,
    onQueryChange: PropTypes.func.isRequired
  }

  handleChange(ev) {
    const { header } = this.props

    const start = _.isEmpty(this.refs.start.value) ? null : this.refs.start.value
    const end = _.isEmpty(this.refs.end.value) ? null : this.refs.end.value

    const values = typeof(header.query.format) === 'function' ?
      [header.query.fmtValue(start), header.query.fmtValue(end)] :
      [start, end]

    this.props.onQueryChange(header.field, header.query, values)
  }

  render() {
    return (
      <div>
        <input className="form-control" type="text" ref="start" onChange={::this.handleChange} placeholder="min" />
        <input className="form-control" type="text" ref="end"   onChange={::this.handleChange} placeholder="max" />
      </div>
    )
  }
}

const components = {
  like: LikeQuery,
  eq: EqQuery,
  range: RangeQuery
}

export default class HeaderQuery extends React.Component {
  static propTypes = {
    header: PropTypes.object.isRequired,
    onQueryChange: PropTypes.func.isRequired
  }

  render() {
    const { header, onQueryChange } = this.props
    const Query = components[header.query.type] || NoQuery

    return (
      <Query header={header} query={header.query} onQueryChange={this.props.onQueryChange} />
    )
  }
}

Когда я пытаюсь загрузить страницу с этим компонентом, я получаю сообщение об ошибке:

invariant.js: 39 Неперехваченное нарушение инварианта: addComponentAsRefTo (...): ссылки могут быть только у ReactOwner. Возможно, вы добавляете ссылку на компонент, который не был создан внутри метода render компонента, или у вас загружено несколько копий React

Он отображается, если я удалю refs= из тегов input, но они мне, очевидно, нужны.

Я рассмотрел альтернативу написанию редуктора для управления состоянием этих компонентов, но это тяжелая работа для того, что должно работать.

Как я могу исправить свои ссылки, чтобы они работали правильно?

Обновить

Хотя я принял ответ на этот вопрос из-за того, что он позволил мне использовать ссылки, как я хотел, все еще остается вопрос, почему это произошло в первую очередь, и обзор говорит, что самым большим подозреваемым является несколько версий реакции. Насколько я могу судить, похоже, что это не так.

sam@sam-macbook-ubuntu:~/myProject/client$ npm ls | grep react
├─┬ [email protected]
│ ├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ └─┬ [email protected]
├─┬ [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├─┬ [email protected]
├─┬ [email protected]
│ ├── [email protected]
├── [email protected]
├─┬ [email protected]
│ └── [email protected]
│ ├─┬ [email protected]
│ ├─┬ [email protected]
│ └── [email protected]
│ └── [email protected]