Обработчик событий с параметрами React

Question

У меня есть две кнопки (значки). В зависимости от того, какой из них я нажимаю (параметр), нужно вызвать функцию для изменения моего макета представления.

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

Рекомендуемый способ сделать это - передать ссылку на функцию как свойство подкомпонентов, а затем подкомпоненты вызвать функцию с требуемыми аргументами. Причина этого заключается в том, что создание функций во время рендеринга может привести к проблемам с производительностью из-за увеличения активности сборщика мусора.

Таким образом, вы бы изменить функцию

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

Затем в ViewListIcon и ViewModuleIcon, вызывать обратные вызовы с соответствующими аргументами. Они могут быть жестко закодированы или переданы в виде большего количества реквизитов.