React 15 Project не очень хорошо работает с библиотекой компонентов React, использующей версию 16 - PullRequest
Новая
       40

React 15 Project не очень хорошо работает с библиотекой компонентов React, использующей версию 16

0 голосов
/ 23 мая 2018

У меня большой проект React (проект A), и я создаю библиотеку компонентов (проект B) для использования в этом проекте.В проекте B для создания карты слайд-шоу используется зависимость «реакция-отзыв-карусель», которую я хотел бы использовать в нескольких проектах, включая проект А.

Слайд-шоу и карта выглядят великолепно и работают, как ожидается, при просмотре.в рамках сборника рассказов проекта В.При загрузке компонента карты (который находится в Проекте B) в Проект A, я сталкиваюсь со следующей ошибкой реакции (наряду с неработающим слайд-шоу): «Невозможно найти узел в не смонтированном компоненте».

Если я удаляю слайд-шоу, использующее стороннюю зависимость, response-responseive-carousel, ошибка исчезает, и я вижу свою карту в Project A. Я использовал как ссылку npm, так и установку зависимости через локальный путь к файлу.и нежелательное поведение происходит в обоих направлениях.

Проект B (библиотека компонентов) использует React 16.3.2.Проект A использует React 15.6.2.

Я попытался понизить версию React проекта A до 15.6.2, но это вызывает ошибку в Storybook, которую я хотел бы продолжить использовать для публикации каталогакомпоненты.

Обновление Project A до 16.3.2 возможно, но я бы предпочел не делать это прямо сейчас из-за риска взлома Project A путем введения новой версии React.Это решение было рассмотрено здесь: Может ли мой проект (реакция 15) использовать зависимость, которая использует реакцию 16?

Смогу ли я использовать равноправные зависимости для решения этой проблемы?Являются ли зависимости от сверстников устаревшими?Существуют ли другие потенциальные решения, которые я могу исследовать, или я должен просто смириться с этим и обновить проект A?

По запросу, вот часть кода.Я упростил это, стараясь сохранить только то, что связано с этой проблемой.

Зависимости проекта B: 

"devDependencies": {
    "@storybook/addon-knobs": "^3.3.13",
    "@storybook/react": "^3.4.0",
    "react": "^16.3.2",        
    "react-dom": "^16.3.1",
    "react-hot-loader": "^4.2.0",
    "react-redux": "^5.0.7",
    "react-responsive-carousel": "^3.1.37",
    "styled-components": "^3.2.5"
  }

Зависимости проекта A: 

"devDependencies": {
    "my-component-library": "file:../../my-component-library",
    "react": "^15.6.2",
    "react-addons-create-fragment": "^15.6.0",
    "react-addons-css-transition-group": "^15.6.0",
    "react-addons-test-utils": "^15.6.0",
    "react-dom": "^15.6.2",
    "react-responsive-carousel": "3.1.34",
  }

Компонент карты, который находится в проекте B: 

    import React from 'react';
    import styled from 'styled-components';

    import { Carousel } from 'react-responsive-carousel';

    //styled components css/js for 
    //CardContainer that has been taken out to keep the post short

    const Card = ({
        stuff, 
        stuff, 
        stuff //simplified for post
    }) => {
        return (
        <CardContainer>
            <div className="carousel-container">

                <Carousel 
                    showThumbs={false}
                    showStatus={false}
                    emulateTouch={true}
                    infiniteLoop={true}> 
                        <img src="whatever.jpg" />
                        <img src="whatever.jpg" />
                        <img src="whatever.jpg" />
                </Carousel>
            </div>
        </CardContainer>
        );
    };
export default Card;

В проекте B я просто импортирую карту и использую ее: 

import { Card } from 'my-component-library';
<Card stuff={stuff} />

1 Ответ

0 голосов
/ 23 мая 2018

Смогу ли я использовать одноранговые зависимости для решения этой проблемы?Являются ли зависимости от сверстников устаревшими?Существуют ли другие потенциальные решения, которые я могу исследовать, или я должен просто поглотить его и обновить Project A?

Если это версии, конфликтующие, тогда обязательно - вы должны использовать peerDependencies, поскольку они не устарели иэто очень хороший пример их использования - именно поэтому фреймворки, такие как create-реакции-приложение или nextjs , не навязывают вам, какую версию реакции следует использовать в вашем проекте.но вы можете установить конкретную версию, которая вам нужна для вашего проекта.

...