Реагировать js с ошибкой браузера и бутстрапа

Question

Я создал приложение Rails и установил react-rails. Я также установил browserify-rails, чтобы помочь мне управлять пакетами внешнего реагирования.

Вся моя настройка работает хорошо, но когда я пытаюсь использовать модальный компонент пакета react-bootstrap, мне представлена ​​ошибка firebug, которая, похоже, блокирует выполнение всех других js. Ошибка гласит:

неперехваченного Инвариантного Нарушение: addComponentAsRefTo (...): Только ReactOwner могут иметь реф ....

Я пробовал множество возможных решений, но не повез. Я не понимаю, почему я получаю ошибку и почему это происходит только на определенных компонентах, таких как <Modal />. Если я использую обычный html-модал, ошибок нет. Вот мои настройки:

package.json

{ 
    "name": "my_project", 
    "devDependencies": { 
    "browserify": "^13.1.0", 
    "browserify-incremental": "^3.1.1", 
    "reactify": "^1.1.1" 
    }, 
    "license": "MIT", 
    "engines": { 
    "node": ">= 0.10" 
    }, 
    "dependencies": { 
    "react": "^15.3.2", 
    "react-bootstrap": "^0.30.3", 
    "react-dom": "^15.3.2" 
    } 
} 

application.js

//= require jquery 
//= require jquery_ujs 
//= require jquery-ui 
//= require react 
//= require react_ujs 
//= require components 
//= require_tree . 

var React = window.React = global.React = require('react'); 
var ReactDOM= window.ReactDOM = global.ReactDOM = require('react-dom'); 

application.rb

... 
config.browserify_rails.commandline_options = "-t reactify --extension=\".js.jsx\"" 
... 

components.js

// Setup app into global name space for server rendering 
var app = window.app = global.app = {}; 

var MyComponent = require('./components/my_component'); 
app.MyComponent = MyComponent; 

my_component.js.jsx

var Modal = require('react-bootstrap').Modal; 
var MyComponent = React.createClass({ 
    render() { 
    return (
     <Modal show={true}><h1>I'm working</h1></Modal> 
    ) 
    } 
}); 
module.exports = MyComponent; 

Я очень новый реагировать и, таким образом, я не уверен, есть ли эта ошибка что-то делать с моей установки или если это что-то еще?

Answer 1

Когда вы используете <Element></Element>, это называется компонентом более высокого порядка. То, что вы положили между этими тегами, не отображается как HTML - оно передается в реквизиты этого компонента.

Так что:

<Modal show={true}><h1>I'm working</h1></Modal> 

ли пропускание h1 к Modal реквизиту. Однако, глядя на их документацию, вы должны передать Modal.X свойствам элемента Modal. Например, из их документов:

 <Modal 
      show={this.state.show} 
      onHide={close} 
      container={this} 
      aria-labelledby="contained-modal-title" 
     > 
      <Modal.Header closeButton> 
      <Modal.Title id="contained-modal-title">Contained Modal</Modal.Title> 
      </Modal.Header> 
      <Modal.Body> 
      Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati. 
      </Modal.Body> 
      <Modal.Footer> 
      <Button onClick={close}>Close</Button> 
      </Modal.Footer> 
     </Modal> 

Answer 2

У меня была эта проблема недавно. Это произошло, когда я добавил компонент React из npm. Несколько экземпляров React загружались на страницу (один из react-bootstrap и один из моего приложения).

В основном то, что я сделал:

Добавлены React и ReactDOM Глобалы в application.js (я вижу, ты уже сделал это):

var React = window.React = global.React = require('react'); 
var ReactDOM = window.ReactDOM = global.ReactDOM = require('react-dom'); 

Удалены требуют реагировать трубопровода активов:

//= require react 

В моих компонентах вместо использования глобального React я снова потребовал их повторной проверки:

var React = require('react'); 
var Modal = require('react-bootstrap').Modal; 
var MyComponent = React.createClass({}); 
module.exports = MyComponent; 

Пожалуйста, дайте мне знать, если это сработает для вас.