FlatList 中动态不同的对象

Question

我构建了一个自定义的 FlatList ，因为我的视图是一样的，我不想重复代码。

我这样执行平面列表：

   <FlatListPicker
                data={availableMeetings}
                type="days"
                updateSelect={selectHandler}
                selected={selectedDay}
            />


                <FlatListPicker
                    data={availableMeetings[0].hours}
                    type="hours"
                    updateSelect={selectHandler}
                    selected={selectedHour}
                />

自定义平面列表如下所示：

   const FlatListPicker = ({ data, type, updateSelect, selected }) => {
   return (
    <FlatList
    horizontal={true}
    data={data}
    renderItem={({ item }) => (
        <TouchableOpacity
            style={[
                styles.button,
                selected === item.key && styles.buttonselected,
            ]}
            onPress={() => updateSelect(item.key, type)}
        >
            <Text
                style={[
                    styles.daytext,
                    selected === item.key && styles.textselected,
                ]}
            >
                {item.dayName}
                {"\n"}
                {type === "days" ? (
                    <Text style={styles.datetext}>{item.date}</Text>
                ) : (
                    <Text style={styles.datetext}>{item}</Text>
                )}
            </Text>
        </TouchableOpacity>
         )}
        keyExtractor={(item, index) => index.toString()}
        />
      );
     };

一切正常。但是就像你看到的，我需要传递名为“Type”的道具来决定在组件中显示什么，（因为否则对象 Item 是不同的，我无法访问对象的属性），所以它看起来有点奇怪，例如:
```
    {type === "days" ? (
                    <Text style={styles.datetext}>{item.date}</Text>
                ) : (
                    <Text style={styles.datetext}>{item}</Text>
                )}
```
我的问题：有一种动态访问项目属性的方法吗？

Answer 1

你可以使用javascript逻辑运算符

试试这个

<Text style={styles.datetext}>{item.date || item}</Text>

Answer 2

你的代码有重复我的兄弟最好的方法是 tornary operator:

   const FlatListPicker = ({ data, type = "days", updateSelect, selected }) => {
   return (
    <FlatList
    horizontal={true}
    data={data}
    renderItem={({ item }) => (
        <TouchableOpacity
            style={[
                styles.button,
                selected === item.key && styles.buttonselected,
            ]}
            onPress={() => updateSelect(item.key, type)}
        >
            <Text
                style={[
                    styles.daytext,
                    selected === item.key && styles.textselected,
                ]}
            >
                {item.dayName}
                {"\n"}
               <Text style={styles.datetext}>{type === "days" ? item.date : item }</Text>
            </Text>
        </TouchableOpacity>
         )}
        keyExtractor={(item, index) => index.toString()}
        />
      );
     };

FlatList 中动态不同的对象

Different object dynamically in FlatList

reactjs

react-native

react-native-flatlist