在React 0.14.8

时间:2016-04-06 19:56:56

标签: javascript reactjs redux refs

我正致力于将我的应用中的一些代码提取到开源软件包中。我的应用程序和我的软件包都依赖于相同版本的React,0.14.8。

自从我将代码移到包中(并进行了一些代码更改)之后,我就无法呈现使用refs的组件。我几个小时都在寻找建议,并且提出了两个基本提示:

  1. 确保反应版本没有冲突
  2. 确保在另一个组件的渲染方法
  3. 中创建带有引用的组件

    据我所知,我已经满足了这两个标准。

    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可以有refs。你可能会   将ref添加到未在a中创建的组件   组件的render方法,或者您有多个React副本   装载

    如果我从refs=代码中移除input,则会显示,但我显然需要这些代码。

    我已经考虑过编写一个减速器来控制这些组件状态的替代方案,但这是一个非常重要的工作方式。

    如何修复我的参考以使它们正常工作?

    更新

    虽然我已经接受了这个问题的答案,因为它允许我像我想要的那样使用refs,但问题仍然是为什么它首先发生,并且调查显示最大的嫌疑人是多个版本反应。据我所知,情况似乎并非如此。

    sam@sam-macbook-ubuntu:~/myProject/client$ npm ls | grep react
    ├─┬ babel-preset-react@6.5.0
    │ ├─┬ babel-plugin-transform-react-display-name@6.5.0
    │ ├─┬ babel-plugin-transform-react-jsx@6.7.5
    │ │ ├─┬ babel-helper-builder-react-jsx@6.7.5
    │ └─┬ babel-plugin-transform-react-jsx-source@6.5.0
    ├─┬ react@0.14.8
    ├── react-addons-css-transition-group@0.14.8
    ├── react-addons-test-utils@0.14.8
    ├── react-dom@0.14.8
    ├─┬ react-loader@2.2.0
    ├─┬ react-redux@4.4.1
    │ ├── hoist-non-react-statics@1.0.5
    ├── react-router@1.0.3
    ├─┬ react-select@1.0.0-beta12
    │ └── react-input-autosize@0.6.10
    │ ├─┬ react-json-tree@0.1.9
    │ ├─┬ react-mixin@1.7.0
    │ └── react-redux@3.1.2
    │ └── react-lazy-cache@3.0.1
    

2 个答案:

答案 0 :(得分:0)

你有没有尝试过类似的东西:

  import ReactDOM from 'react-dom'
const start = _.isEmpty(ReactDOM.findDOMNode(this.refs.start).value) ? null : ReactDOM.findDOMNode(this.refs.start).value
    const end = _.isEmpty(ReactDOM.findDOMNode(this.refs.end).value) ? null : ReactDOM.findDOMNode(this.refs.end).value

我上课,你的参考作品我做了这个简单的测试:

import React, { PropTypes, Component } from 'react'
import _ from 'lodash'

export default class RangeQuery extends React.Component {


    handleChange(ev) {


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


        console.log("end")
        console.log(end)
    }

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

唯一的区别是我在课程告诉我是否有帮助之前添加了export default

答案 1 :(得分:0)

目前尚不清楚问题是什么,这仍然听起来像是React的重复副本,但是一个解决方法是使用函数ref样式,这将是未来的首选样式:

<input ref={(node) => this.startInput = node} />

然后您可以访问this.startInput.value