我如何在 react.js 或 react-native 中使用默认道具？

Question

例如。我有提要和上传组件。我在 Feed 中也有 ImageFeedList 组件，上传组件

(Feed.js)

import React, {useContext, useState, useEffect} from 'react';
import {StackNavigationProp} from '@react-navigation/stack';
import {RandomUserDataContext} from '~/Context/RandomUserData';
import ImageFeedList from '~/Components/ImageFeedList';

type NavigationProp = StackNavigationProp<FeedsTabParamList, 'Feeds'>;
interface Props {
 navigation: NavigationProp;
 }


   const Feeds = ({navigation}: Props) => {

   const {getMyFeed} = useContext(RandomUserDataContext);

   const [feedList, setFeedList] = useState<Array<IFeed>>([]);

   const [loading, setLoading] = useState<boolean>(false);

  useEffect(() => {
    setFeedList(getMyFeed(24));
  }, []);


  return (

     <ImageFeedList
      feedList={feedList}
      loading={loading}
      onRefresh={() => {
      setLoading(true);
      setTimeout(() => {
      setFeedList(getMyFeed(24));
      setLoading(false);
      }, 2000);
      }}
     onEndReached={() => {
     setFeedList([...feedList, ...getMyFeed(24)]);
      }}
     onPress={() => {
     navigation.navigate('FeedListOnly');
     }}
      />
     );
      };

   export default Feeds;

（上传.js）

 import React, {useContext, useState, useEffect} from 'react';
 import {RandomUserDataContext} from '~/Context/RandomUserData';
 import ImageFeedList from '~/Components/ImageFeedList';

  const Upload = () => {
  const {getMyFeed} = useContext(RandomUserDataContext);
  const [feedList, setFeedList] = useState<Array<IFeed>>([]);
  const [loading, setLoading] = useState<boolean>(false);

  useEffect(() => {
  setFeedList(getMyFeed(24));
  }, []);

     return (

   <ImageFeedList
    feedList={feedList}
    loading={loading}
    onRefresh={() => {
    setLoading(true);
    setTimeout(() => {
    setFeedList(getMyFeed(24));
    setLoading(false);
    }, 2000);
  }}
  onEndReached={() => {
    setFeedList([...feedList, ...getMyFeed(24)]);
  }}
  />
 );
 };

 export default Upload;

(ImageFeedList.js)

import React from 'react';

import {
FlatList,
Image,
Dimensions,
NativeSyntheticEvent,
NativeScrollEvent,
} from 'react-native';

  import styled from 'styled-components/native';

  interface Props {

 id?: number;
 bounces?: boolean;
 scrollEnabled?: boolean;
 feedList: Array<IFeed>;
 loading?: boolean;
 onRefresh?: () => void;
onEndReached?: () => void;
  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
 onPress?: () => void;

}

const ImageFeedList = ({
 id,
 bounces = true,
 scrollEnabled = true,
feedList,
loading,
onRefresh,
onEndReached,
onScroll,
onPress,
}: Props) => {
const width = Dimensions.get('window').width;
const imageWidth = width / 3;

return (

<FlatList
  data={feedList}
  style={{width}}
  keyExtractor={(item, index) => {
    return `image-feed-${id}-${index}`;
  }}
  showsVerticalScrollIndicator={false}
  scrollEnabled={scrollEnabled}
  bounces={bounces}
  numColumns={3}
  onRefresh={onRefresh}
  onEndReached={onEndReached}
  onEndReachedThreshold={0.5}
  refreshing={loading}
  onScroll={onScroll}
  scrollEventThrottle={400}
  renderItem={({item, index}) => (
    <ImageContainer
      style={{
        paddingLeft: index % 3 === 0 ? 0 : 1,
        paddingRight: index % 3 === 2 ? 0 : 1,
      }}
      onPress={onPress}>
      <Image
        source={{uri: item.images[0]}}
        style={{width: imageWidth, height: imageWidth}}
      />
    </ImageContainer>
  )}
/>
    );
    };

   export default ImageFeedList;

我想问的是，在 Feed 组件中我有 OnPress，我可以将 onPress 作为道具传递给 ImageFeedList 组件，但上传组件中没有 onPress 道具。但是即使上传中没有 onPress 也不会发生错误，因为我有一个

interface Props {
onPress?: () => void;
 }

我在 ImageFeedList 组件中定义 onPress Props 的这段代码意味着如果我没有得到 Props onPress 那就没问题

我可以在 typeScript 中使用这个默认道具

但我的问题是，除了 typeScript 之外，我如何在 react 和 react-native 中使用默认道具？？

有办法吗？？

Answer 1

您已经在 ImageFeedList 中使用默认道具。

const ImageFeedList = ({
     id,
     bounces = true, /* <<< has a default value "true"*/
     scrollEnabled = true, /* <<< has a default value "true"*/
     ...
     onPress /* <<< has no defaut value*/,
    }: Props) => {...}

您可以添加类似的内容作为 onPress 的默认设置

const ImageFeedList = ({
     ...
     onPress = () => console.log(), /* a default prop as an arrow function */
    }: Props) => {...

这是另一个如何将函数作为默认参数传递的示例

function y(prop = function () {console.log("I log default")}){
  prop(); 
};
y(); // will log "I log default"
y(function () {console.log("I am not a default");}); // will log "I am not a default"

更新： 您还可以在使用之前检查是否定义了 onPress。

    <ImageContainer
  ...
  onPress={() => typeof onPress === "function" && onPress()}>