Hoe maak je een functie te geven aan een component als een eigenschap in Reageer Inheems

Question

Hoe maak je een functie te geven aan een component als een eigenschap in Reageer Inheems

stemmen

0

Ik heb een JS functie die een weergave keert terug met een aantal subonderdeel gecreëerd en ik hergebruik van de code.I wil weten hoe kan ik pas een functie om de component die wordt gemaakt door een functie

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

Bovenstaande code worpen en een fout zeggend onMenuPress is geen functie, dan kunt u voor te stellen.

javascript react-native react-native-ios

De vraag is gesteld op 13/01/2020 om 21:58
bron van user vishal dharankar

In andere talen...

2 antwoorden

Travis James · Answer 1 · 2020-01-13 22:06

Wikkel de functie binnen het Componentu retour:

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

Javlonbek Sharipov · Answer 2 · 2020-01-13 22:24

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

Moet u gebruik maken onPressItem en niet onPress in props