无法在显然正常的分量中找到可变道具

Question

最近我在React-native中遇到一个我无法理解的错误。

我创建了此组件：

import React from "react";
import imageToRender from "./imageToRender";
import Lines from "./Lines";
import { View, Text, Image, TouchableOpacity } from "react-native";

export default (SliderEntry = props => {
    const lines = Lines(props.index);
    const thirdLine = lines.length === 3;

    return (
        <TouchableOpacity
            style={{ flexDirection: "column" }}
            onPress={() => props.navigation.navigate("DetailScreen", { item: props.item, index: props.index })}
        >
            <Image
                source={imageToRender(index)}
                style={{ width: 400, height: 400, position: "absolute", top: 0 }}
                resizeMode={"cover"}
            />
            <View style={{ flexDirection: "row" }}>{lines[0]}</View>
            <View style={{ flexDirection: "row" }}>{lines[1]}</View>
            {thirdLine && <View style={{ flexDirection: "row" }}>{lines[2]}</View>}
            <View>
                <Text style={{ color: "white", fontSize: 10 }}>{props.item.displayText}</Text>
            </View>
        </TouchableOpacity>
    );
});

然后我在传递给Carousel组件的此函数中将其称为：

renderItem = ({ item, index }) => {
    return <SliderEntry item={item} index={index} navigation={navigation} />;
};

但是由于某些原因我不知道道具有问题

谁能看到我的组件有什么问题吗？

Answer 1

您正在使用功能组件，并尝试执行默认导出。

更改此行

export default (SliderEntry = props => {

to

export default (props => {

在这里，当您导出函数时，不需要SliderEntry。您可以使用另一个选项将其分配给const变量，例如

const SliderEntry = props => {}

并以类似方式导出

 export default SliderEntry

希望这会有所帮助。