1

我有一个大型 React 项目（项目 A），我正在创建一个组件库（项目 B）以在该项目中使用。项目 B 使用依赖项“react-responsive-carousel”来创建幻灯片卡，我想在多个项目中使用它，包括项目 A。

在 Project B 的 Storybook 下查看时，幻灯片和卡片看起来很棒并且按预期工作。将卡组件（位于项目 B 中）加载到项目 A 中时，我遇到了以下反应错误（以及损坏的幻灯片）：“无法在未安装的组件上找到节点。”

如果我删除使用第三方依赖项 react-responsive-carousel 的幻灯片，错误就会消失，我可以在项目 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 的风险。此处介绍了此解决方案：我的项目（反应 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 中的 Card 组件：

    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} />
4

1 回答 1

1

我可以使用对等依赖项来解决这个问题吗？对等依赖项是否已弃用？是否有其他潜在的解决方案我可以探索，或者我应该接受它并更新项目 A？

如果这是版本冲突，那么可以肯定——你应该使用peerDependencies它们，因为它们没有被弃用，这对它们来说是一个非常好的用例——这正是为什么像create-react-app或nextjs这样的框架不会强加给你哪个版本的反应你应该在您的项目中使用，但您可以安装项目所需的特定版本。

于 2018-05-23T18:00:49.760 回答