Question

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

In [13]: "%06d" % 88
Out[13]: '000088'

我遇到的问题是我的某些组件似乎在互相编写，我认为正是这种导入方法正在这样做。例如：我的PageForProfile组件是：

    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');

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

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

而不是输出文字，我的＆＃34;关注＆＃34;显示组件代替＆＃34; PageForProfile＆＃34;零件！我尽可能多地阅读了React的文献，但仍然感到茫然。非常感激任何的帮助。干杯。（p.s.新的StackOverflow - 如果我按照我要求的方式打破了礼仪，请在这里真的感谢您的社区。）

Answer 1

您尚未发布viewComponents.ios结构，但您所做的事情肯定是错误的。要求相同的文件将始终返回相同的对象：module.exports中定义的对象（请参阅What is the purpose of Node.js module.exports and how do you use it?）

您有两种选择：

将您的组件定义在不同的文件中（follow.ios，trending.ios等），并为不同的组件需要不同的文件。
定义一个文件中的所有组件，并使用module.exports将所有组件作为module.exports返回的对象的属性返回（这是React在导入Text，View等时所执行的操作）。在这种情况下，您的要求会有所不同：

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

Answer 2

不知道viewComponents中的内容，但您可能需要在变量声明周围使用大括号，例如。

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

这会破坏viewComponents（我猜测）返回的组件的对象。

组件在React中覆盖彼此/组件组织

2 个答案: