Tengo una simple react componente con un formulario en el que:

var AddAppts = React.createClass({
    handleClick: function() {
        var title = this.refs.title.getDOMNode().value;
        ....

        var appt = {
            heading: title
            ...
        }

        CalendarActions.addAppointment(appt);
    },

    render: function() {
        return (
            <div>
                <label>Description</label>
                <input ref="title"></input>
                ...
            </div>
        );
    }
});
module.exports = AddAppts;

Estoy tratando de render este componente en otro react componente:

  var AddAppt = require('./AddAppts');

  render: function() {
    return (
      <div>
        <AddAppt />
      </div>
    );
  }

pero me sale este error:

 Uncaught 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.

He buscado en google, pero no puede averiguar lo que tengo que hacer para solucionar este problema.

  • Esas son 2 archivos diferentes. Cuando he importado el archivo, me dio un nombre diferente.
  • He intentado reproducir lo que creo que es su instalación. Es este bastante cerca?
  • Podría también indicar que reaccionan versión estás usando? Has descubierto cuál es el problema?
  • Has encontrado el significado de este error ?
  • No he resuelto el problema. Estoy usando React 0.13.1
  • Estoy teniendo el mismo problema. Alguien ha encontrado un significado/solución?
  • Mientras tanto, Facebook ha añadido un enlace en el mensaje de error: gist.github.com/jimfb/4faa6cbfb1ef476bd105. Asegúrese de echar un vistazo a los comentarios de posibles soluciones.

InformationsquelleAutor jhamm | 2015-02-14

12 Comentarios

  1. 54

    Esta es la INFORMACIÓN para las personas que utilizan reaccionar y redux-devtools que están consiguiendo OP mensaje. Su estructura se parece a

    project
      client
      node_modules
        react
        redux-devtools
          node_modules
            react

    El código de cliente requerirá la primera reaccionar módulo; que en redux-devtools va a exigir de la otra reaccionar. El reaccionar módulo mantiene el estado y se supone que se tiene todo el estado.

    Obtener el OP del mensaje debido a que su estado se divide entre el 2 de reaccionar de los módulos. Esta situación es lo que yo creo que @asbjornenge se refiere.

    Me estaba liando el código de cliente con webpack, por lo que he usado para tratar el tema. Usted puede forzar a todos los require y import a utilizar siempre la primera reaccionar mediante la adición de la siguiente webpack.config.js

    module.exports = {
      ...
      resolve: {
        alias: {
          'react': path.join(__dirname, 'node_modules', 'react')
        },
        extensions: ['', '.js']
      },
      ...
    );

    Que no he mirado en lo que tendría que hacer si la situación se produjo con el desagregado de código que se ejecuta en el nodo.

    • Esto funcionó para mí.
    • La solución más sencilla que he visto hasta ahora teniendo en cuenta cómo fragmentado y desordenado el JS dev comunidad
    • Esto realmente funciona para mí, gracias!
    • Usted se merece una medalla! Un mal tema, realmente – la cordura es nuevo.
    • ¿Por qué necesita extensions de la propiedad, así como resolver.alias?
    • FYI – yo, personalmente, tenía que usar el proceso.cwd() en lugar de dirname, pero esto no funcionó y es muy útil. Saludos
    • Todo depende de donde su webpack.archivo de configuración se encuentra @netpoetica. proceso.cwd() es probable que corregir más a menudo de lo que __dirname.
    • Yo creo la cadena vacía en las extensiones permitidas requiere de subdirectorios por ejemplo, reaccionar/lib/index . Lo siento, ha sido un tiempo.
    • Esto funcionó para mí! 🙂 Gracias!
    • Esto funcionó para mí. Yo era el desarrollo de una biblioteca local y lo tenía como un archivo de dependencia como tal mecanismo nacional de prevención no era capaz de aplanar las dependencias
    • Simplemente fantástico. Muchas gracias!

  2. 42

    Me encontré con este error cuando un componente del módulo con su propia reaccionar dependencia instalado. Así que yo estaba usando varias versiones de Reaccionar.

    Asegúrese de que NO a la lista de reaccionar bajo dependencies en su package.json.

    Esta es la razón por la que hemos peerDependencies 😉

    • Ah! Gracias por este. Yo estaba accidentalmente compilación de dos versiones de Reaccionar en una prueba y el que viene con este error. Yo nunca la he encontrado por mí mismo. Error de novato!
    • No pares dependencias de ser eliminado en NPM 3.0? Entonces, ¿qué?
    • Mi problema es el orden de la carga de secuencia de comandos. Me carga react-with-addons.js antes de react-dom.js. Y el problema apareció. Dudo que haya alguna característica en react-with-addons.js 🙂
    • peerDependencies no han sido eliminadas, se acaba de advertir, en lugar de auto-instalación. Consulte github.com/npm/npm/issues/6565#issuecomment-74971689.
  3. 16

    Sólo en caso de que. Ser consciente de las Reaccionar nombre del módulo que se esté utilizando (es sensible a mayúsculas). Tengo el mismo error cuando por casualidad he intentado require Reaccionar de dependencia con diferentes nombres en dos módulos independientes.

    //module1.js
    var React = require('react');
    ...
    
    //module2.js
    var React = require('React');
    ....

    Funciona e incluso hace algo, pero el Sólo un ReactOwner puede tener referencias… de error aparece.

    • Usted acaba de salvarme! He estado cavando alrededor de 20 minutos para volverse loco. Leí esto y miré hacia abajo a mi editor. Efectivamente, un gran «require(‘Reaccionar’)» estaba mirando a la derecha de nuevo a mí.
    • Deben estar en minúsculas – react, gracias.
  4. 3

    Reordenamiento de la secuencia de comandos resuelto el problema.

    Mal.

    <script src="./lib/react.js"></script>
    <script src="./lib/react-dom.js"></script>
    <script src="./lib/react-with-addons.js"></script>

    Correcta

    <script src="./lib/react.js"></script>
    <script src="./lib/react-with-addons.js"></script>
    <script src="./lib/react-dom.js"></script>

    Referencia https://github.com/gcanti/tcomb-form/issues/107#issuecomment-150891680

    • Es incluyendo ambos react y react-with-addons necesario? No el último, de incluir todo el código de la ex?
    • Esto se ha corregido el error en mi caso
  5. 2

    Vi este error, mientras que el desarrollo de un reaccionan módulo que estaba vinculado a un proyecto de prueba utilizando mecanismo nacional de prevención de enlace. El cambio a un regular dependencia resuelto el problema.

    Parece que Reaccionar no le gusta npm link.

    • ¿Qué significa «cambiar a regular la dependencia» significa?
    • npm link es una forma de utilizar un directorio (a través de un enlace simbólico) en lugar de una dependencia instalado por npm. Eliminar el enlace simbólico y de relanzamiento npm install soluciona el problema.
  6. 1

    Hay otra situación.

    Me puse el Reaccionar de la biblioteca externa en el webpack.config.js y de importación react.js de cdnjs.

    externals: {
      'react': 'React'
    }

    Cuando yo uso una biblioteca de interfaz de usuario dependen de Reaccionar,tales como material de interfaz de usuario,reaccionar-bootstrap,se produjo este problema.

  7. 0

    estoy escribiendo con mi vieja pluma. asegúrese de que en el proyecto de la raíz del paquete.json mover reaccionar dependencia tan pronto como sea posible. todavía se están recibiendo problema? & si usted está utilizando módulos npm y el gruñido de la tarea, usted puede agregar a continuación limpio tarea para quitar interior de los componentes de reaccionar(duplicados).

    clean: {
    react : ['node_modules/**/react','!node_modules/react']
    },

  8. 0

    Vi este error después de que me mudé a mi package.json archivo de un nivel, por lo que tuve 2 node_modules directorios en mi proyecto (uno en ./node_modules y otro en ./web/node_modules). Cómo quitar el directorio ha resuelto el problema.

  9. 0

    Para mí el motivo por el mismo problema era que no me ha importado la ReactDom a nivel mundial, como una propiedad del objeto window, como este:

    import ReactDOM from 'react-dom'
    window.ReactDOM = ReactDOM

    la eliminación de window.ReactDOM = ReactDOM se ha solucionado el problema.

  10. 0

    Similar a esta respuesta, yo estaba viendo este error, mientras que el uso de un módulo independiente que había estado desarrollando en un directorio independiente utilizando yarn link.

    La solución era correr yarn unlink module-name en mi proyecto del directorio de trabajo. Luego me quitó node_modules y corrió yarn upgrade module-name y yarn para la buena medida.

  11. 0

    Ninguna de las soluciones que funcionó para mí, a pesar de que sin duda ayudó a que me muestres dónde buscar.

    Por alguna razón mi proyecto tiene dos node_modules carpetas – uno en el directorio raíz y uno de nivel. Soy nuevo en Reaccionar, así que no sé si esto es normal o qué. Voy con lo Visual Studio me dio cuando empecé un nuevo proyecto.

    De todos modos, sabía que el módulo estaba causando el problema, y esto sucedió sólo existen en uno de la node_modules carpetas.

    He movido el módulo de problema a la otra node_modules carpeta. Problema resuelto.

Dejar respuesta

Please enter your comment!
Please enter your name here