为什么我不能在两个渲染函数中传递一个函数？

Question

我正在编写一个简单的应用程序，用于呈现媒体（照片或视频）。根据渲染对象，我必须传递以下函数之一：removePhoto 或 removeVideo。所以首先我尝试了以下方法：

export const renderMedia = (media, removePhoto, removeVideo) => {
  console.log("media: ", media);
  if (media && media.length > 0) {
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          numColumns={3}
          horizontal={false}
          data={media}
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => {
            let itemUri;
            if (item.video && item.thumbnail) {
              itemUri = item.thumbnail;
            } else if (item.uri) {
              itemUri = item.uri;
            } else {
              itemUri = item;
            }
            return (
              <TouchableOpacity
                style={{ flex: 1 / 3, borderColor: "#cbe6ef", borderWidth: 2 }}
              >
                <Image
                  style={{ flex: 1 / 3, aspectRatio: 1 / 1 }}
                  source={{ uri: itemUri }}
                />

                <TouchableOpacity
                  onPress={() => {
                    console.log("item? ", item.type);
                    item.type === "video" ? removeVideo() : removePhoto(item);
                  }}
                  style={{
                    alignSelf: "flex-end",
                    position: "absolute",
                  }}
                >
                  <Ionicons
                    name="close-circle-outline"
                    size={34}
                    color="black"
                    style={{ alignSelf: "center", padding: 5 }}
                  />
                </TouchableOpacity>
              </TouchableOpacity>
            );
          }}
        />
      </View>
    );
  }
};

removeVideo和removePhoto方法确实有效，但上面的代码很难看。所以我尝试通过以下方式分解 t：

export const renderMedia = (media, removePhoto, removeVideo) => {
  if (media && media.length > 0) {
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          numColumns={3}
          horizontal={false}
          data={media}
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => {
            let itemUri;
            if (item.video && item.thumbnail) {
              console.log("remove video: ", removeVideo);
              renderVideo(item, removeVideo);
            } else {
              renderPhoto(item, removePhoto);
            }
          }}
        />
      </View>
    );
  }
};

然后：

const renderVideo = (props) => {
  console.log("render video props: ", props);
};

我看到一个控制台：

media:  Array [
  Object {
    "thumbnail": "some.jpg",
    "video": "some.mp4",
  },
]
remove video:  [Function removeVideo]
render video props:  Object {
  "thumbnail": "some.jpg",
  "video": "some.mp4",
}

那是我没有通过 removeVideo 功能。我在 renderVideo 的属性或其他任何地方都看不到它。有人可以解释我为什么以及如何通过它吗？

编辑:

这是我在父组件中的 removeVideo 函数：

function removeVideo() {
    console.log("video removed. should cause component to rerender?");
    setEditedObject({
      ...editedObject,
      video: null,
    });
  }

Answer 1

调用 renderVideo 时，您传递了 2 个值 item 和 removeVideo 方法。但是在函数定义中，你刚刚采用了一个参数，即 props 将保持 item

的值

const renderVideo = (props, removeVideo) => {
  // Here you will get your item in props
  // and removeVideo as function you have passed.
};

或者如果你想把它放在一个变量中，你必须把它作为一个对象来传递。

间接地它只是一个函数而不是一个组件。如果你将一些东西作为道具传递，那么你可以将它作为一个对象放在一个变量中，但是这里 renderVideo() 是一个简单的函数，所以你也必须注意参数。

为什么我不能在两个渲染函数中传递一个函数？

Why I can not pass a function within two render functions?

javascript

reactjs

react-native

react-functional-component