Question

我想同时导出两个组件。这里一个组件是类组件，另一个是无状态组件。我也想在类组件中显示无状态组件。因此，如何将这两个导出在一起，同时我需要在Menu（Class组件）组件内部呈现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

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

您可以做的是

export const TabMenu = () => {}

或

const TabMenu = () => {}

export TabMenu

AND

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

Answer 2

您也可以：

const reduxTabMenu=connect(mapStateToProps, {setOrder })(TabMenu )
const reduxMenu=connect(mapStateToProps, {setOrder })(Menu )

export default { reduxTabMenu, reduxMenu}

然后可以导入

import Menu from "path"

并使用它

ReduxMenu=Menu.reduxMenu

<ReduxMenu/>

如何同时导出两个组件

2 个答案: