React (Native) Funktion von Constant

Question

Hoffentlich ist das für jemanden einfach ... aber ich bleibe hier stecken. Ich suche nach einer Konstante. Eines der Dinge, die ich abbilden möchte, ist eine onPress-Funktion ... also in meiner Konstante schließe ich ein, was ich möchte, dass diese Funktion ist, aber ich habe Probleme mit "diesem". Das Beispiel sollte am sinnvollsten sein ... jede Hilfe wird geschätzt, wie man das richtig einrichtet. Ich benutze React Native, aber ich bin mir sicher, dass das gleiche Prinzip für React gilt.

const ITEMS = [ 
    { title: 'Item 1', subTitle: 'Click here for Item 1 function', onPress:() => this.function1() }, 
    { title: 'Item 2', subTitle: 'Click here for Item 2 function', onPress:() => this.function2() } 
] 

class Page extends Component { 
    function1 =() => { 
    console.log('This is function 1'); 
    } 

    function2 =() => { 
    console.log('This is function 2'); 
    } 

    render() { 
    return (
     <View> 
      {_.map(ITEMS, (item, itemIndex) => { 
      return (
       <Item 
       key={itemIndex} 
       title={item.title} 
       subTitle={item.subTitle} 
       onPress={item.onPress} 
       index={itemIndex} 
       /> 
      ); 
      })} 
     </View> 
    ); 
} 

export default Page; 

Der Fehler ich auch weiterhin erhalten ist:

_this.function1 is not a function 

Weiß jemand, wie ich das richtig einrichten kann? Vielen Dank!

Answer 1

1. Für Native React können Sie einfach ITEMS.map als Benutzer Envision kommentiert verwenden.

2. Sie versuchen, this außerhalb der Page Klasse zu verwenden, die in seinem Kontext bedeutet, function1() und function2() nicht vorhanden sind. Beachten Sie, dass wenn Sie const ITEMS innerhalb der Page Klasse bewegen, sagen Sie innerhalb render(), wird es anfangen zu arbeiten.

   render() { 
       const ITEMS = [ 
       { title: 'Item 1', subTitle: 'Click here for Item 1 function', onPress:() => this.function1() }, 
       { title: 'Item 2', subTitle: 'Click here for Item 2 function', onPress:() => this.function2() } 
       ] 
   
       return (
       <View> 
        {ITEMS.map((item, itemIndex) => { 
        return (
         <Item 
         key={itemIndex} 
         title={item.title} 
         subTitle={item.subTitle} 
         onPress={item.onPress} 
         index={itemIndex} 
         /> 
        ); 
        })} 
       </View> 
   ) 
   } 
   

Dies ist eher ein Grund Javascript Verständnis Frage. Um zu verstehen, wie Sie Ihren Code machen können, was Sie wollen, sollten Sie über this lesen und schließlich wie bind() funktioniert. Diese andere StackOverflow answer kann auch hilfreich sein.