Reactjs 如何正确导出react中包含多个类的组件

我实际上正在开发一个小的react应用程序，我实际上想将我的组件连接到firebase，但是这个组件包含多个类和多个导出，所以当我应用我的方法（基于一个类组件）时，它什么也不呈现给我，它应该从firestore返回数据

当我尝试在MapStateTops上控制台记录状态时，它返回未定义的：

const mapStateToProps = (state) => {
   console.log("state firebase",state);
   return {
     animationsfb: state.firestore.ordered.animations,
   }
}

这是我的组件，包含多个类：

export class AnimationScreen extends Component {

  render() {
    return (
         <View>
          .........
         </View>
    );
  }
}

const mapStateToProps = (state) => {
    console.log("state firebase",state);
 return {
   animationsfb: state.firestore.ordered.animations,
 }
}

class DetailsScreen extends React.Component {

    render() {

        return (
           <View>
             .........
           </View>
        );
     }
}

const Navigator = FluidNavigator({

        home: {screen: AnimationScreen},
        homeDetails: {screen: DetailsScreen},
},
);

class HomeTransitions extends React.Component {
    static router = Navigator.router;


    render() {
        const {navigation} = this.props;

        return (
            <Navigator navigation={navigation}/>
        );
    }
}
// it was like this before i change it: **export default HomeTransitions**

export default compose(
    connect(mapStateToProps), firestoreConnect([{ collection: 'animations'}])
    ) (HomeTransitions);

导出类动画屏幕扩展组件{
render（）{
返回(
.........
);
}
}
常量mapStateToProps=（状态）=>{
console.log（“state firebase”，state）；
返回{
动画FB:state.firestore.ordered.animations，
}
}
类DetailsScreen扩展了React.Component{
render（）{
返回(
.........
);
}
}
const Navigator=FluidNavigator({
主页：{screen:AnimationScreen}，
homeDetails:{screen:DetailsScreen}，
},
);
类HomeTransitions扩展了React.Component{
静态路由器=Navigator.router；
render（）{
const{navigation}=this.props；
返回(
);
}
}
//在我更改它之前是这样的：*导出默认HomeTransitions**
导出默认组合(
connect（mapStateToProps）、firestoreConnect（[{collection:'animations'}]）
)（家庭过渡）；

---

我希望在控制台记录时返回状态数据，但它返回未定义的数据。

当前您正在尝试将所有内容连接到存储，包括导航器，这可能不是您想要做的

如果您只是在

AnimationScreen

中使用

animationsfb

，只需将此组件连接到应用商店，并将输出用作导航器中的屏幕：

类动画屏幕扩展组件{
render（）{
返回(
// [...]
);
}
}
常量mapStateToProps=（状态）=>{
console.log（“state firebase”，state）；
返回{
动画FB:state.firestore.ordered.animations，
}
}
const AnimationScreenConnected=连接（MapStateTrops）（AnimationScreen）；

然后在导航器中：

const Navigator=FluidNavigator({
主页：{screen:AnimationScreenConnected}，
homeDetails:{screen:DetailsScreen}，
});

为什么不将类分离到它们自己的文件中并单独导出它们呢？事实上，现在它返回MapStateTops的状态，但值animationsfb返回undefined

this.props.animationsfb

应在

AnimationScreen

中提供，但可能会有一个小的延迟，在此期间尚未从商店获取它。如果未定义值，您可以在渲染函数中添加条件并显示加载指示器。感谢您的回复，实际上我发现了我缺少的内容，我只需要将我的组件连接到firebase集合，因此我添加了以下内容：

const AnimationScreenConnected=compose（connect（MapStateTrops），firestoreConnect（[{collection:'animations'}]）（动画屏幕）；