reactjs - 如何同时导出两个组件

Question

我想同时导出两个组件。这里一个组件是类组件，另一个是无状态组件。我也想在类组件中显示无状态组件。那么我如何将这两个一起导出，同时我需要在 Menu(类组件)组件内渲染 TabMenu(无状态组件)。

class Menu extends Component {
  constructor(props) {
   super(props);
   this.state = {
      products: [],
      username: ""
    };
 }

...
   render() {

     const card = this.state.products.map(product => (
        <Card>
         ..
         </Card>
        ))
        return (


            {card}

        </ScrollView>
      </ImageBackground>
      <TouchableOpacity
        style={styles.iconContainer}
        onPress={() => navigation.navigate("Cart")}
      >
        <Image
          style={styles.icon}
          source={require("../.././res/cart2.png")}
        />
        <View style={styles.cartItems}>
          <Text style={{ color: "white" }}>1</Text>
        </View>    
      </TouchableOpacity>
    </ThemeProvider>
  </View>
  );
 }
}

 const TabMenu = createBottomTabNavigator(
 {
      BUY: {
        screen: Menu,
        navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Image
           style={styles.tabIcon}
           source={require("../.././res/buy.png")}
            tintColor={tintColor}/> )}}

  export default connect(mapStateToProps, { setOrder })(TabMenu,Menu);

Answer 1

您只能声明一个默认导出，并且只能传递一个组件进行连接。

你能做的是

export const TabMenu = () => {}  

或

const TabMenu = () => {}

export TabMenu

和

export class Menu extends Component {}

或

class Menu extends Component {}

export Menu

您可以通过以下方式访问此组件

import {TabMenu, Menu} from './yourPage.js'

要连接两个组件，您可以做的是:

const myConnector = connect(mapState);

export const TabManuComponent = myConnector(TabMenu);
export const MenuComponent = myConnector(Menu);