Передайте функцию как prop, которая возвращает некоторый шаблон jsx

#reactjs #react-native #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>
 ))}
/>

Но если я отделю его, а затем передам как реквизит, это не сработает. Это дает мне ошибку

Функции недопустимы в качестве дочернего элемента React. Это может произойти, если вы вернете компонент вместо <Component/> отрисовки.

 //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}/>

Ответ №1:

Ваша функция ничего не возвращает, потому что в ней отсутствует оператор возврата

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

Если вы хотите передать такие компоненты, вы можете рассмотреть возможность передачи их как дочерних. Компоненты могут быть составными:

 <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 .