Использование определенных компонентов React-Bootstrap вызывает нарушение инварианта

Я только что обновился до React Bootstrap v. 0.27.1, React v. 0.14.0 и React Router v. 1.0.0-rc3, и теперь я получаю Нарушение инварианта при использовании определенного React Bootstrap компоненты.

Неперехваченная ошибка: нарушение инварианта: addComponentAsRefTo(...): Только ReactOwner может иметь ссылки. Возможно, вы добавляете ссылку на компонент, который не был создан внутри метода render компонента, или у вас загружено несколько копий React (подробности: https://fb.me/react-refs-must-have-owner).

В частности, я вижу это, когда использую компоненты <Input> и <Nav>. Итак, я получаю следующее поведение.

// Does NOT work.
// --------------
<Navbar>
    <Nav bsStyle="pills" activeKey={1}>
        <NavItem eventKey={1} href="/">Home</NavItem>
    </Nav>
</Navbar>

// Works
// -----
<Navbar>
    <ul className="nav nav-pills">
        <NavItem eventKey={1} href="/">Home</NavItem>
    </ul>
</Navbar>

Как видите, переключение <Nav> на обычную разметку Bootstrap решает проблему. То же самое, когда я добавляю компонент <Input>. Могут быть и другие компоненты, из-за которых что-то ломается, но я сузил список до этих двух.

В любом случае, я не могу понять, почему это происходит с этими компонентами, а не с другими, и любая помощь будет оценена по достоинству.


reactjs react-router react-bootstrap
person Juan Carlos Farah    schedule 11.10.2015    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Я открыл эту проблему в репозитории react-bootstrap, и кто-то указал, что это не относится к React Bootstrap, а было вызвано тем, что загружались две копии React. Похоже, это было вызвано Browserify, поскольку я смог решить эту проблему, добавив browserify-resolutions. к моему процессу сборки. Так как я использую Gulp, мой gulpfile оказался включенным в две задачи ниже. Обратите внимание, что browserify-resolutions вызывается со строкой .plugin(resolutions, 'react').

// Compile third-party dependencies separately for faster performance.
gulp.task('browserify-vendor', function() {
    return browserify()
        .require(dependencies)
        .plugin(resolutions, 'react')
        .bundle()
        .pipe(source('vendor.bundle.js'))
        .pipe(gulpif(production, streamify(uglify({ mangle: false }))))
        .pipe(gulp.dest('public/js'));
});

// Compile only project files, excluding all third-party dependencies.
gulp.task('browserify', ['browserify-vendor'], function() {
    return browserify('src/app.js')
        .external(dependencies)
        .plugin(resolutions, 'react')
        .transform(babelify)
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulpif(production, streamify(uglify({ mangle: false }))))
        .pipe(gulp.dest('public/js'));
});
person Juan Carlos Farah    schedule 12.10.2015

arrow_upward
0
arrow_downward

Спасибо за публикацию, Хуан. Я пробовал браузерные разрешения, но он полностью отказался от дублирования двух копий React в пакетах. В конце концов я решил проблему, удалив всю папку node_modules и выполнив полную переустановку npm.

Это привело к удалению включенной в React 0.14.0 зависимости под react-dom (что вызывало дублирование при сборке). Мне интересно, могло ли это быть связано с последним NPM, использующим плоскую структуру папок, которая автоматически устраняет дубликаты в иерархии.

После этого у меня не было проблем, и мне вообще не нужно было использовать браузерные разрешения.

person James Allen    schedule 13.10.2015

arrow_upward
0
arrow_downward

Если по какой-либо причине вы попали сюда в поисках решения, и ничего не работает. И ЕСЛИ вы также используете приложение create-react-app, я предлагаю вам проверить файл index.html на наличие нескольких «встроенных» пакетов, которые загружают несколько react или что-то еще, что вызывает ошибку Invariant Violation. Надеюсь, это поможет кому-то.

person Hiwa    schedule 30.05.2018