如何查看一个组件中的多个组件

Question

如何在子组件中查看多个组件？

更多详情：我有一个包含 4 个水平滑块的页面 .. 所以我将每个滑块作为这个名称下的单独组件（firstSlider.js、secondSlider.js...），并且需要在子中查看所有这些滑块名为“explore.js”的组件（这是一个空组件文件，仅供查看此滑块）.. 并通过 App.js

呈现 explore.js

有什么解决办法吗？

import React, { Component } from 'react';
import FirstSlider from './firstSlider'
import SecondSlider from './secondSlider'
import ThirdSlider from './secondSlider'

export default function AppPortal(){
  return (
  <>      
  
    <FirstSlider />
    <SecondSlider />
    <ThirdSlider />

  </>
);
};

explore.js

import React from 'react';
import {  Text, SafeAreaView, ScrollView, Image, Item, View, TouchableOpacity } from 'react-native';
import styles from './../../styles/explore'



export default function ThirdSlider(){
  return (
    <SafeAreaView style={styles.container}>
     <ScrollView style={styles.scrollView} horizontal={true} >
       <Text style={styles.sldrTtlStl}>Most eaten</Text>
        ....Rest of the code
     </ScrollView>
    </SafeAreaView>
  );
}

thirdSlider.js 其余滑块相同

结果

他们都在彼此之上

Answer 1

你能分享一些代码吗？

从逻辑上讲，如果您希望它们中的四个同时渲染，您需要：

export function explorer() {
  return (
    <>
      <FirstSlider />
      <SecondSlider />
      <ThirdSlider />
      <FourthSlider />
    </>
  );
}

如果您只想根据特定道具启用其中一个滑块，那么您应该：

function SwitchExplorer(x) {
  switch (x) {
    case 'firstSlider':
      return <FirstSlider />;
    case 'secondSlider':
      return <SecondSlider />;
    case 'thirdSlider':
      return <thirdSlider />;
    case 'fourthSlider':
      return <FourthSlider />;
    default:
      return null
  }
}

function explorer() {
  return (
    { SwitchExplorer(slider) }
  )
}

Answer 2

你必须像 FlatList inside FlatList 一样实现。您可以准备如下数组

[{"id":1,"title":"Category 1","mealList":[]},
{"id":2,"title":"Category 1","mealList":[]},
{"id":3,"title":"Category 1","mealList":[]}]

AppPortal.js

export default function AppPortal() {
  function renderItem() {
    return (<View>
      {/** Category Name */}
      <Text>{item.title}</Text>
      {/** MealList */}
      <FlatList
        ...
        data={props.mealList} // List with subcategory item
        renderItem={/** Subcategory UI */}
        horizontal={true}

      />
    </View>)
  }
  /** Render Main List */
  return (<FlatList data={this.props.listData}
    ....
    data={props.listData} // Main list
    renderItem={renderItem}
  />);
};

如何查看一个组件中的多个组件

How to view a multiple components in a component

ecmascript-6

reactjs

react-native

react-native-scrollview

react-native-android