将自定义组件呈现为列表项

Posted 2023-02-19

【中文标题】将自定义组件呈现为列表项

【英文标题】：Render custom component as a List Item

【发布时间】：2020-12-11 17:07:13

【问题描述】：

所以我试图在 React-Native 的特定屏幕上呈现过滤后的数据列表。

我遇到了一个问题

Error: Objects are not valid as a React child (found: object with keys _40, _65, _55, _72)

但是，如果我使用常规的 <Text/> 元素来渲染它，它就可以正常工作。

我认为在平面列表甚至地图函数中渲染自定义组件时，我不太清楚

这就是我的FlatList 的样子：

<FlatList
      vertical
      style= backgroundColor: "#376772" 
      keyExtractor=(crossing) => crossing.stop_id
      data=props.crossings_fav
      renderItem=( item ) => 
     
         return <CrossingCell
            func=() => 
              props.navigation.navigate("Crossing", 
                crossing: item,
              );
            
            name=item.stop_name
            status=item.stop_status
            is_fav=item.is_fav
          ></CrossingCell>
      
    />

CrossingCell.js：

    class CrossingCell extends PureComponent 
    get_color = (v) => 
        switch (v) 
            case 'clear':
                return `#5cb85c`

            case 'busy':
                return `#f0ad4e`

            case 'stop':
                return `#d9534f`
        
    

    get_icon = (v) => 
        switch (v) 
            case 'clear':
                return `ios-checkmark`

            case 'busy':
                return `md-warning`

            case 'stop':
                return `ios-close`
        
    

    get_fav_icon = (v) => 
        const ico = v == true ? `ios-star` : `ios-star-outline`

        return ico
    
    render() 
        return (
            <TouchableOpacity
                onPress=() => 
                    this.props.func()
                
            >
                <View
                    style=
                        backgroundColor: this.get_color(this.props.status),
                        margin: 5,
                        borderRadius: 5,
                        padding: 5,
                        justifyContent: 'center',
                        alignItems: 'center',
                        borderColor: '#202B35',
                        borderWidth: 1,
                    
                >
                    <Text
                        numberOfLines=2
                        style=
                            textAlign: 'center',
                            fontSize: scale(15),
                            fontWeight: 'bold',
                            padding: 5,
                            color: '#fff',
                        
                    >
                        this.props.name
                    </Text>

                    <View
                        style=
                            margin: 5,

                            flexDirection: 'row',
                        
                    >
                        <Icon
                            name=this.get_fav_icon(this.props.is_fav)
                            type="ionicon"
                            color="yellow"
                        />
                        <View
                            style=
                                margin: 5,
                                borderRadius: 5,
                                backgroundColor: '#202B35',
                                padding: 5,
                                flexDirection: 'row',

                                marginHorizontal: scale(100),
                            
                        >
                            <Text
                                style=
                                    padding: 4,
                                    fontSize: scale(12),
                                    textAlign: 'center',
                                    color: this.get_color(this.props.status),
                                    fontWeight: 'bold',
                                
                            >
                                Status : this.props.status
                            </Text>
                            <Icon
                                name=this.get_icon(this.props.status)
                                type="ionicon"
                                color=this.get_color(this.props.status)
                                containerStyle= marginLeft: scale(5) 
                            />
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
        )
    

export default CrossingCell

【问题讨论】：

能否贴出CrossingCell的代码

【参考方案1】：

这是因为某处（我想在您的自定义组件的文本中）您正在渲染一个地图，您的 JSX 需要一个字符串。

请确保您的 props.stop_status 不是一个对象，而只是一个字符串。如果它是一个字符串，则必须检查 JSX 中包含的所有变量。

【讨论】：

还要检查 props.name。如果仍然有问题，请分享您传递给组件的属性。

好吧，我让它毫无问题地呈现在主页上。我不知道为什么它不能正确渲染相同类型的数组