1

Я написал автономный компонент, и он работает правильно. Если я запускаю этот компонент как отдельный компонент. Я хотел бы выпустить этот компонент как модуль NPM, чтобы я мог поделиться этим компонентом. В моем примере приложения я определил путь к модулю в моем package.json, и он сбрасывается с помощью NPM. Я использую Webpack для пакетирования и успешно строит пакет, но когда я запускаю код в браузере я получаюТолько у ReactOwner могут быть ссылки. Возможно, вы добавили ref к компоненту, который не был создан внутри метода рендеринга компонента.

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

я провел целый день, и попытался несколько хаков, но я не могу чтобы найти точную основную причину проблемы?

+1

Возможно, вы используете несколько вариантов реакции. Проверьте свои модули в node_modules и убедитесь, что –

+0

Я проверил реактивную версию и нет проблемы с реакционной версией. Я использую ref в моем компоненте реакции для перемещения по дому. – Sunny

+0

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

ответ

2

В вашем WebPack конфигурации использовать это во внешней конфигурации, как:

output: { 
    path: __dirname + "/dist", 
    filename: 'bundle.js', 
    // library: 'hello-007', 
    libraryTarget: 'umd', 
    }, 
    externals: [{ 
    'react': { 
     root: 'React', 
     commonjs2: 'react', 
     commonjs: 'react', 
     amd: 'react' 
    } 
    }, { 
    'react-dom': { 
     root: 'ReactDOM', 
     commonjs2: 'react-dom', 
     commonjs: 'react-dom', 
     amd: 'react-dom' 
    } 
    }], 
    module : { 
    loaders : [ 
     { 
     test : /\.js?/, 
     loader : 'babel' 
     } 
    ] 
    }, 
1

Существует другой способ есть реф в коде, который также решение этой проблемы. использовать, как это

<div className="nav-window-content" 
      ref={(node) => this.menuList = node}> 

and for getting the reference use 
this.menuList 

 Смежные вопросы

  • Нет связанных вопросов^_^