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

Question

例如:我有饲料和上传组件。我也有ImageFeedList组件在Feeds，上传组件

(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;

(Upload.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;

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

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

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

我可以在typeScript中使用这个默认的props

但我的问题是，我怎么能在react和react-native中使用默认的道具，而不是typeScript??

有办法吗?

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()}>