React-如何使导出组件对其目录私有？

Posted 2023-02-01

是否有可能将React组件的导入限制在其自己的目录中？因此，只能在同一目录内导入吗？

例如，我具有以下目录结构：

src/
   apps/
      myapp.js
      /table
         table.js
         table-row.js

文件table-row.js具有以下组成部分

export const TableRow = (row, index) => 
    return <TableRow> ... </TableRow>
;

如何将TableRow设为/table目录的私有文件，所以我不能导入该目录之外的内容？但是table/table.js可以导入吗？

答案

您不能实际上执行此操作，但是我喜欢遵循的模式是执行类似操作

• src
  • 组件
  • MyComponent
    • MyComponent.jsx
    • PrivateHelperComponent.jsx
    • index.js

其中组件类似于以下内容：

//MyComponent.jsx
const MyComponent = () => 
  return (
    <div>
      ...
      <PrivateHelperComponent />
    </div>
  )
>

export default MyComponent

//PrivateHelperComponent.jsx
const PrivateHelperComponent = () => 
  return (
    <div>
      ...
    </div>
  )
>

export default PrivateHelperComponent

//index.js
export  default  from "./MyComponent"

...现在，从<...>/components/MyComponent导入的界面是“干净的”，您只能导入“默认”组件。

当然，没有什么可以阻止您执行import PrivateHelperComponent from "<...>/components/MyComponent/PrivateHelperComponent"，但至少在我看来，它清楚地指出了要导入/重用的meant组件是什么，而没有]]

另一答案

JS中没有可用于导出的访问修饰符（所有导出可用于所有模块；又名公共），因此您无法将导出设为其目录私有。

另一答案

您不能那样做。但是，如果您真的想使其私有，则将表行（不导出）和表放在同一文件中。