パラメータを持つイベントハンドラReact

Question

私は2つのボタン（アイコン）を持っています。どの項目をクリックするか（パラメータ）に応じて、ビューレイアウトを変更する関数を呼び出す必要があります。

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

現在、私はそれが動作矢印機能を使用しますが、私は警告を持っている： JSXの小道具は、矢印の機能を使用しないでください

リアクトにこのような何かを行うための最善の方法は何ですか？

Answer 1

これを行うには、関数への参照をサブコンポーネントのプロパティとして渡し、サブコンポーネントに必要な引数を持つ関数を呼び出させることをお勧めします。このようにする理由は、レンダリング中に関数を作成すると、ガベージコレクタのアクティビティが増えるため、パフォーマンス上の問題が発生する可能性があるからです。

だから、あなたは、ViewListIconとViewModuleIconで、その後

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

にあなたの関数を変更する適切な引数でコールバックを呼び出します。これらはハードコーディングされるか、より多くの小道具として渡される可能性があります。