Как передать функцию в качестве компонента в качестве свойства в React Native

голоса
0

Я создал функцию JS, которая возвращает представление с некоторым подкомпоненте и я повторно использовать в code.I хочет знать, как я могу передать функцию к компоненту, который создается с помощью функции

const MenuItem = ({title,indicatorColor,index,onPressItem}) => (
      <TouchableOpacity onPress={()=>onPressItem(index)} >
        <View
          style={{
            paddingLeft: 20,
            paddingBottom: 15,
            paddingTop: 15,
            flexDirection: 'row',
            width: 150,
            borderRightWidth: 2,
            borderRightColor: 'Colors.GREY_TWO',
            backgroundColor: indicatorColor,
            alignItems: 'center',
          }}>
          <View 
            style={{
              backgroundColor: 'black',
              height: 5,
              width: 5,
              borderRadius: 3,
              alignSelf: 'center',
  
            }} 
          /> 
          <Text style={{fontSize: 15, left: 5,alignItems: 'center',}}>{title}</Text>
        </View>
      </TouchableOpacity>
  );

  const onMenuItemPress = (index) => {
      console.log('menu selected:'.index);
  }
  
  <MenuItem title='Sort' indicatorColor='red' index='0' onPress={onMenuItemPress} />

Над кодом броски и ошибки говоря onMenuPress не является функцией, пожалуйста, предложите.

Задан 13/01/2020 в 21:58
источник пользователем
На других языках...                            


2 ответов

голоса
0

Заверните функцию внутри Componentвы возвращаете:

const MenuItem = ({title,indicatorColor,index,onPressItem}) => {

     const onMenuItemPress = (index) => {
         console.log('menu selected:'.index);
     }

     return (
      <TouchableOpacity onPress={()=>onPressItem(index)} >
        <View
          style={{
            paddingLeft: 20,
            paddingBottom: 15,
            paddingTop: 15,
            flexDirection: 'row',
            width: 150,
            borderRightWidth: 2,
            borderRightColor: 'Colors.GREY_TWO',
            backgroundColor: indicatorColor,
            alignItems: 'center',
          }}>
          <View 
            style={{
              backgroundColor: 'black',
              height: 5,
              width: 5,
              borderRadius: 3,
              alignSelf: 'center',

            }} 
          /> 
          <Text style={{fontSize: 15, left: 5,alignItems: 'center',}}>{title} 
          </Text>
        </View>
      </TouchableOpacity>
     )
  };


  <MenuItem title='Sort' indicatorColor='red' index='0' onPress={onMenuItemPress} />
Ответил 13/01/2020 в 22:06
источник пользователем

голоса
1
const MenuItem = ({title,indicatorColor,index,onPressItem}) => (
          <TouchableOpacity onPress={()=>onPressItem(index)} >
            <View
              style={{
                paddingLeft: 20,
                paddingBottom: 15,
                paddingTop: 15,
                flexDirection: 'row',
                width: 150,
                borderRightWidth: 2,
                borderRightColor: 'Colors.GREY_TWO',
                backgroundColor: indicatorColor,
                alignItems: 'center',
              }}>
              <View 
                style={{
                  backgroundColor: 'black',
                  height: 5,
                  width: 5,
                  borderRadius: 3,
                  alignSelf: 'center',

                }} 
              /> 
              <Text style={{fontSize: 15, left: 5,alignItems: 'center',}}>{title}</Text>
            </View>
          </TouchableOpacity>
      );

      const onMenuItemPress = (index) => {
          console.log('menu selected:'.index);
      }

      <MenuItem title='Sort' indicatorColor='red' index='0' onPressItem={onMenuItemPress} />

Вы должны использовать onPressItem и не onPress в реквизита

Ответил 13/01/2020 в 22:24
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more