React 中覆盖 eachother/Component 组织的组件

Question

所以我想知道组件的组织和导入（要求）在 React Native 中应该如何工作。我在一个文件中构建了一个包含一个主要 TabView 组件的小型应用程序，然后还有另一个文件包含每个选项卡下的组件。为了将所有这些都带入主文件，我有一大堆导入语句，即：

    var Following = require('./viewComponents.ios');
    var Trending = require('./viewComponents.ios');
    var CommentButton = require('./viewComponents.ios');
    var NotificationPage = require('./viewComponents.ios');
    var LikeButton = require('./viewComponents.ios');
    var WishLists = require('./viewComponents.ios');
    var PageForProfile = require('./viewComponents.ios');

我遇到了一个问题，我的一些组件似乎在互相覆盖，我认为正是这种导入方法正在做这件事。例如：我的 PageForProfile 组件是：

 class PageForProfile extends Component{
        render(){
        return(
            <Text>Hello</Text>
        )
    }
    }

但是当我写一个标签来显示这个组件时：

<PageForProfile></PageForProfile>

我的 "Following" 组件没有输出文本，而是显示 "PageForProfile" 组件！我已经尽可能多地阅读了 React 文献，但仍然不知所措。非常感激任何的帮助。干杯。（p.s。Whosebug 的新手 - 如果我在询问的方式中违反了礼仪，请告诉我，非常感谢您的社区。）

Answer 1

不知道 viewComponents 中有什么，但您可能需要在变量声明周围使用大括号，例如

var {Following, Trending, CommentButton} = require('./viewComponents.ios');

这会破坏 viewComponents（我猜）returns.

组件的对象

Answer 2

您还没有发布您的 viewComponents.ios 结构，但您所做的肯定是错误的。需要相同的文件将始终 return 相同的对象：在 module.exports 中定义的对象（参见 What is the purpose of Node.js module.exports and how do you use it?）

您有两个选择：

在不同的文件（following.ios、trending.ios 等）中定义您的组件，并且不同的组件需要不同的文件。
在一个文件中定义所有组件，并将 module.exports 到 return 所有组件作为由 module.exports 编辑的对象 return 的属性（这就是 React 所做的导入文本、视图等时）。在这种情况下，您的需求看起来会有点不同：

{
    Following,
    Trending, 
    ....
} = require('viewComponents.ios');

React 中覆盖 eachother/Component 组织的组件

Components overriding eachother/Component organization in React

javascript

reactjs

react-native