Event-Handler mit Parametern React

Question

Ich habe zwei Schaltflächen (Symbole). Je nachdem, auf welchen ich klicke (Parameter), sollte eine Funktion aufgerufen werden, um mein Ansichtslayout zu ändern.

export default class ToolbarPictograms extends Component { 
     static propTypes = { 
     layout: PropTypes.string.isRequired, 
     changeLayout: PropTypes.func.isRequired 
     } 

     constructor(props) { 
     super(props) 
     this.handleClick = this.handleClick.bind(this) 
     } 

     handleClick = value => { 
     this.props.changeLayout(value) 
     } 

     render() { 
     const changeLayout = this.props.changeLayout 
     return (
      <div style={style.container}> 
      <Divider /> 
      <div className='row end-xs'> 
       <ViewListIcon onClick={() => changeLayout('list')} /> 
       <ViewModuleIcon onClick={() => changeLayout('modules')}/> 
      </div> 
      <Divider /> 
      </div> 
     ) 
     } 
    } 

Derzeit verwende ich Pfeil Funktionen, es funktioniert, aber ich habe eine Warnung: JSX Requisiten sollten Pfeil Funktionen nicht verwenden

Was ist die beste Art und Weise reagiert so etwas wie dies in zu tun?

Answer 1

Die empfohlene Vorgehensweise besteht darin, einen Verweis auf die Funktion als Eigenschaft der Unterkomponenten zu übergeben und anschließend die Unterkomponenten die Funktion mit den erforderlichen Argumenten aufzurufen. Der Grund dafür ist, dass das Erstellen von Funktionen während des Renderns aufgrund der erhöhten Garbage-Collector-Aktivität zu Leistungsproblemen führen kann.

Also, würden Sie Ihre Funktion

ändern

render() { 
     const changeLayout = this.props.changeLayout 
     return (
      <div style={style.container}> 
      <Divider /> 
      <div className='row end-xs'> 
       <ViewListIcon onClick={this.props.changeLayout} /> 
       <ViewModuleIcon onClick={this.props.changeLayout}/> 
      </div> 
      <Divider /> 
      </div> 
     ) 
     } 

Dann in ViewListIcon und ViewModuleIcon, die Rückrufe mit entsprechenden Argumenten aufrufen. Diese könnten fest codiert oder als mehr Requisiten weitergegeben werden.