共享反应本地组件

Question

我是React，React-Nodejs的新手。

我尝试通过 npm init 创建节点模块。在此模块中，我创建了一个组件 - 用于启动样式按钮。我通过 npm pack poffage.json 文件中的一个链接通过“ file：../ shared/_dist/sharde-1.0.tgz）包装了此链接。 “依赖项部分。

在我的共享index.js中，

import MyButtonFirst from './components/buttons/MyButtonFirst';
module.exports = { MyButtonFirst  };

在React应用程序中是

import React from 'react;
import { MyButtonFirst } from 'shared';

export default function MySharedButton()
{
   return <MyButtonFirst />;
}

它有效！

，然后我尝试创建使用 react-native-native-andAsync-staregora/async-streetage的组件/strong>（通过共享项目中的NPM安装）。在增加版本后，npm pack，链接和安装新版本的软件包我会发现 asyncstorage在Android运行后 null 。

为什么异步是无效的？我在两个项目中都创造了依赖吗？ （这是一个奇怪的解决方案 - 尽管有效，但对我来说并不适合） 如何共享例如图标，图像等的资源

等代码我们需要共享 - 图标，上下文（用户，主题等），错误处理，API调用等...我们不希望将其作为一个大权利控制应用程序开发，但是作为单个个人的几个小应用程序角色。

如何在更反应的应用程序之间共享代码的最佳方法是什么？

Answer 1

andncstorage已弃用，请参见在这里。

您可以根据数据库的反馈（用户的角色）链接到不同应用程序的start.js。
否则，它将以例如登录和注册儿童组件（例如登录和注册）路线路由受欢迎的组件。

import ReactDOM from "react-dom";
import Welcome from "./welcome";
import AppAth from "./app-ath";
import AppRef from "./app-ref";
import AppAdmin from "./app-admin";

fetch("api/users/role.json")
    .then((res) => res.json)
    .then((user_role) => {
        if (user_role == "ath") {
            ReactDOM.render(<AppAth />, document.getElementById("root"));
        } else if (user_role == "ref") {
            ReactDOM.render(<AppRef />, document.getElementById("root"));
        } else if (user_role == "admin") {
            ReactDOM.render(<AppAdmin />, document.getElementById("root"));
        } else {
            ReactDOM.render(<Welcome />, document.getElementById("root"));
        }
    })
    .catch((err) => console.log(err));
            

像这样，您可以将应用程序的标准文件夹保持在react中，并在它们之间的公共文件夹中共享所有童装，挂钩和文件：

要使用户分开，您将用户的角色存储在cookie中，并在服务器端检查该角色。

如果cookie为空，它将始终带回欢迎组件。

旁注：当然，文件夹结构始终取决于Bundler设置！因此，您的应用程序的文件夹结构可能与图像上的文件夹可能不同。