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

【问题标题】：How to view a multiple components in a component如何查看一个组件中的多个组件
【发布时间】：2020-06-22 09:30:28
【问题描述】：

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

更多细节：我有一个包含 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 其余的滑块都是一样的

结果

他们都在彼此之上

【问题讨论】：

只导入所有的滑块（firstSlider.js、secondSlider.js）并像这样使用它们？
已经这样做了，但他们看错了..就像他们在彼此之上
那是一个css问题
我对我的问题进行了编辑，请检查

标签： reactjs react-native ecmascript-6 react-native-android react-native-scrollview

【解决方案1】：

你必须在 FlatList 中实现类似 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}
  />);
};

【讨论】：

【解决方案2】：

你能分享一些代码吗？

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

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

【讨论】：