Как экспортировать два компонента одновременно - PullRequest
Новая
       13

Как экспортировать два компонента одновременно

3 голосов
/ 03 июля 2019

Я хочу экспортировать два компонента одновременно. Здесь один компонент является компонентом класса, а другой - компонентом без сохранения состояния. Я хочу показать компонент без сохранения состояния внутри компонента класса тоже. Итак, как я могу экспортировать эти два вместе, и в то же время мне нужно визуализировать TabMenu (компонент без сохранения состояния) внутри компонента Menu (компонент Class). 

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

Ответы [ 2 ]

0 голосов
/ 03 июля 2019

Вы также можете сделать: 

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

export default { reduxTabMenu, reduxMenu}

, затем импортировать его можно 

import Menu from "path"

и использовать его 

ReduxMenu=Menu.reduxMenu

<ReduxMenu/>
0 голосов
/ 03 июля 2019

У вас может быть только один экспорт по умолчанию, который вы объявляете, и вы можете передать только один компонент для подключения.

что вы можете сделать, это 

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