React 15 Project与使用版本16的React组件库不兼容

时间:2018-05-23 14:58:09

标签: reactjs npm storybook

我有一个大型的React项目(项目A),我正在创建一个在该项目中使用的组件库(项目B)。项目B使用依赖性' react-responsive-carousel'创建幻灯片卡,我想在多个项目中使用,包括项目A.

幻灯片和卡片看起来很棒,并且在项目B的故事书中查看时可以正常工作。将卡组件(位于项目B中)加载到项目A中时,我遇到了以下反应错误(以及损坏的幻灯片): "无法在未安装的组件上找到节点。"

如果我删除使用第三方依赖项,反应响应轮播的幻灯片,则错误消失,我可以在项目A中看到我的卡。我已经使用了npm链接以及安装依赖项通过本地文件路径,不良行为发生在两个方面。

项目B(组件库)正在使用React 16.3.2。 项目A正在使用React 15.6.2。

我已尝试将Project A的React版本降级为15.6.2,但这会导致Storybook出错,我希望继续使用它来共享组件目录。

将项目A更新为16.3.2是可能的,但由于存在通过引入新版本的React来破坏项目A的风险,我现在不愿意这样做。此解决方案包含在此处:Can my project(react 15) use a dependency that using react 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 :(得分:1)

  

我是否可以使用对等依赖项来解决此问题?是同行   不推荐使用依赖项?我还有其他可能的解决方案吗?   探索,或者我应该把它搞砸并更新项目A?

如果版本发生冲突则确定 - 您应该使用peerDependencies因为它们不被弃用,这对他们来说是一个非常好的用例 - 这正是create-react-app或{{3}这样的框架的原因不要强加你应该在项目中使用哪个版本的反应,但是你可以安装项目所需的特定版本。