'React Owner만 참조할 수 있다'는 것은 무슨 뜻입니까?

'React Owner만 참조할 수 있다'는 것은 무슨 뜻입니까?

심플한 게 있어요react폼이 있는 컴포넌트:

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;

하려고 합니다.render다른 컴포넌트react컴포넌트:

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

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

하지만 다음 오류가 나타납니다.

 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.

검색해 봤는데 이 문제를 해결하려면 어떻게 해야 하는지 모르겠어요.

OP의 메시지를 받는 react 및 redux-devtools를 사용하는 사용자를 위한 참고 자료입니다.당신의 구조는

project
  client
  node_modules
    react
    redux-devtools
      node_modules
        react

클라이언트의 코드에는 첫 번째 리액트 모듈이 필요하며, redux-devtools에서는 다른 리액트 모듈이 필요합니다.리액트 모듈은 상태를 유지하고 모든 상태를 가진 것으로 간주합니다.

상태가 2개의 리액트 모듈로 분할되어 있기 때문에 OP 메시지가 표시됩니다.이 상황은 @asbjornenge가 말하는 것이라고 생각합니다.

클라이언트 코드를 webpack으로 번들하고 있었기 때문에 그것을 사용하여 문제를 해결했습니다.모든 것을 강제할 수 있습니다.require그리고.importwebpack.config.display에 다음 항목을 추가하여 항상 첫 번째 반응을 사용합니다.

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

노드상에서 언번들된 코드가 실행되고 있는 경우에 어떻게 대처해야 하는지 아직 조사하지 않았습니다.

사용하던 컴포넌트 모듈에 자체 리액션 의존성이 설치되어 있을 때 이 오류가 발생하였습니다.그래서 리액트 여러 버전을 사용했어요.

리스트가 반응하지 않도록 주의해 주세요.dependencies당신의 안에서package.json.
이게 바로 우리가peerDependencies;-)

혹시 모르니까.사용 중인 React 모듈 이름에 주의하십시오(대문자와 소문자가 구분됩니다).우연의 일치로 같은 실수를 했어요require두 개의 개별 모듈에서 서로 다른 이름으로 종속성을 반응시킵니다.

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

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

효과도 있고 렌더링도 가능하지만 Ref를 가질 수 있는 사람은 Ref를 가질 수 있는 건 React Owner뿐이에요에러가 표시된다.

스크립트를 재배치하면 문제가 해결되었습니다.

틀렸어.

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

맞아요.

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

레퍼런스 https://github.com/gcanti/tcomb-form/issues/107#issuecomment-150891680

를 사용하여 테스트 프로젝트와 연계된 리액트 모듈을 개발하다가 이 에러를 보았습니다.일반 의존관계로 전환하면 문제가 해결되었습니다.

리액트는 그런 거 싫어하나 봐npm link.

다른 상황이 있다.

react를 webpack.config.js 외부 라이브러리로 설정하고 cdnjs에서 react.js를 Import합니다.

externals: {
  'react': 'React'
}

material-ui, react-bootstrap 등 UI 라이브러리를 React에 의존하면 이 문제가 발생하였습니다.

내 오래된 펜으로 쓰고 있어. 프로젝트 루트 패키지에 확실히 넣어둬.json 이동은 가능한 한 빨리 반응합니다. 여전히 문제가 있습니까?npm 모듈 및 grunt 태스크를 사용하는 경우 아래 클린 태스크를 추가하여 내부 컴포넌트의 반응(증명)을 제거할 수 있습니다.

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

는 제가 되었습니다.package.json 2개의 파일 업을 .node_modules내 (의 디렉토리 중 )./node_modules 또 하나는 in and and and and에 있다../web/node_modules를 삭제하면 오래된 디렉토리를 삭제하면 문제가 해결됩니다.

는 제가 입니다.ReactDom다음과 같이 window 객체의 속성으로 글로벌하게 설정합니다.

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

, 의window.ReactDOM = ReactDOM문제를 해결했습니다.

이 답변과 마찬가지로 다른 디렉토리에서 개발하던 다른 모듈을 사용하던 중 이 오류가 발생했습니다.yarn link.

해결방법은 실행이었다.yarn unlink module-name내 프로젝트의 작업 디렉토리에 있습니다. 그 i i 、 는 、 거 、 i 、 。node_modulesyarn upgrade module-name ★★★★★★★★★★★★★★★★★」yarn좋은 값으로.

대신

<input ref="title"></input>

이거 드셔보세요

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

어느 솔루션도 효과가 없었습니다.하지만, 어느 쪽의 솔루션도 도움이 되지 않았습니다.

인지 내 프로젝트에는 두 가지가 .node_modules폴더 - 하나는 루트 디렉토리에 있고 다른 하나는 레벨 위에 있습니다.리액트는 처음이라서 이게 정상인지 뭔지 모르겠어요.저는 Visual Studio가 새로운 프로젝트를 시작할 때 준 것을 그대로 사용할 것입니다.

어쨌든, 문제의 원인이 되고 있는 모듈은 알고 있었습니다만, 이 모듈은 어느 쪽인가 하면node_modules★★★★★★ 。

.node_modules가 해결되었습니다문제는 해결됐습니다.

언급URL : https://stackoverflow.com/questions/28519287/what-does-only-a-reactowner-can-have-refs-mean