传递一个函数作为 prop which returns 一些 jsx 模板

Question

如果我直接将 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}/>

Answer 1

您的函数 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.

获取并呈现它们

传递一个函数作为 prop which returns 一些 jsx 模板

Pass a function as prop which returns some jsx template

reactjs

react-native

prop