传递一个函数作为 prop which returns 一些 jsx 模板
Pass a function as prop which returns some jsx template
如果我直接将 map 函数作为 prop 传递,它就可以工作。但它变得丑陋。
有没有更好的方法来解决这个问题。我想让它看起来更干净。
<FoodInfo info={restaurant?.menu.map((item, index) => (
<View key={index} style={{alignItems: 'center'}}>
<View style={{height: Sizes.height * 0.35}}>
<Image source={item.photo} style={styles.image} />
</View>
</View>
))}
/>
但是如果我把它分开然后作为道具传递它就不起作用了。它给我一个错误
Functions are not valid as a React child. This may happen if you
return a Component instead of <Component/>
from render.
//Separated
const infoFunc = () => {
restaurant?.menu.map((item, index) => (
<View key={index} style={{alignItems: 'center'}}>
<View style={{height: Sizes.height * 0.35}}>
<Image source={item.photo} style={styles.image} />
</View>
</View>
));
};
//pass the function
<FoodInfo info={infoFunc}/>
您的函数 return 什么都没有,因为它缺少 return 语句
const infoFunc = () => {
return restaurant?.menu.map((item, index) => (
<View key={index} style={{alignItems: 'center'}}>
<View style={{height: Sizes.height * 0.35}}>
<Image source={item.photo} style={styles.image} />
</View>
</View>
));
};
或使用圆括号:
const infoFunc = () => (
restaurant?.menu.map((item, index) => (
<View key={index} style={{alignItems: 'center'}}>
<View style={{height: Sizes.height * 0.35}}>
<Image source={item.photo} style={styles.image} />
</View>
</View>
));
);
当您想要像这样传递组件时,您可以考虑将它们作为 children 传递。组件是可组合的:
<FoodInfo>
{restaurant?.menu.map((item, index) => (
<View key={index} style={{alignItems: 'center'}}>
<View style={{height: Sizes.height * 0.35}}>
<Image source={item.photo} style={styles.image} />
</View>
</View>
))}
</FoodInfo>
在 FoodInfo 中,您可以从 props.children
.
获取并呈现它们
如果我直接将 map 函数作为 prop 传递,它就可以工作。但它变得丑陋。 有没有更好的方法来解决这个问题。我想让它看起来更干净。
<FoodInfo info={restaurant?.menu.map((item, index) => (
<View key={index} style={{alignItems: 'center'}}>
<View style={{height: Sizes.height * 0.35}}>
<Image source={item.photo} style={styles.image} />
</View>
</View>
))}
/>
但是如果我把它分开然后作为道具传递它就不起作用了。它给我一个错误
Functions are not valid as a React child. This may happen if you return a Component instead of
<Component/>
from render.
//Separated
const infoFunc = () => {
restaurant?.menu.map((item, index) => (
<View key={index} style={{alignItems: 'center'}}>
<View style={{height: Sizes.height * 0.35}}>
<Image source={item.photo} style={styles.image} />
</View>
</View>
));
};
//pass the function
<FoodInfo info={infoFunc}/>
您的函数 return 什么都没有,因为它缺少 return 语句
const infoFunc = () => {
return restaurant?.menu.map((item, index) => (
<View key={index} style={{alignItems: 'center'}}>
<View style={{height: Sizes.height * 0.35}}>
<Image source={item.photo} style={styles.image} />
</View>
</View>
));
};
或使用圆括号:
const infoFunc = () => (
restaurant?.menu.map((item, index) => (
<View key={index} style={{alignItems: 'center'}}>
<View style={{height: Sizes.height * 0.35}}>
<Image source={item.photo} style={styles.image} />
</View>
</View>
));
);
当您想要像这样传递组件时,您可以考虑将它们作为 children 传递。组件是可组合的:
<FoodInfo>
{restaurant?.menu.map((item, index) => (
<View key={index} style={{alignItems: 'center'}}>
<View style={{height: Sizes.height * 0.35}}>
<Image source={item.photo} style={styles.image} />
</View>
</View>
))}
</FoodInfo>
在 FoodInfo 中,您可以从 props.children
.