JSX-нет-связывания в функции контекстная карте

Question

У меня есть следующий код в рендер функции:

<table className="table table-bordered table-striped"> 
    <ResultsTableHeader /> 
    <tbody> 
    {results.map(result => (
     <Result 
     key={result.get('id')} 
     deleteResult={this.props.destroyResult.bind(null, result.get('id'))} 
     {...result} 
     /> 
    ))} 
    </tbody> 
</table> 

Эслинг жалуется react/jsx-no-bind, так что обычно я бы создать ссылку на связанный FUNC в конструкторе, но это различно, так как это различная функция для каждого вызова с карты.

Answer 1

другие ответы (используя =>), вероятно, являются неправильными. Из jsx-no-bind справки о:

связывает вызов или функция стрелки в опоре JSX создаст совершенно новую функцию на каждом рендер. Это плохо для производительности, так как это приведет к тому, что сборщик мусора будет вызван больше, чем это необходимо.

Так ESLint пожалуется с обоими bind & => (за исключением, если вы установите allowArrowFunctions: true).

Решение заключается в перемещении вызова функции внутри компонента.

В родителю:

<Result 
    key={result.get('id')} 
    deleteResult={this.props.destroyResult} 
    {...result} 
/> 

В детстве:

const Result = (props) => { 
    handleDelete =() => props.deleteResult(props.get('id')) 
    return (
    <div onClick={handleDelete}></div> 
) 
} 

Answer 2

Вы можете использовать функцию стрелка синтаксис:

deleteResult={() => this.props.destroyResult(result.get('id'))} 

Answer 3

Чтобы расширить на ответы уже заданных, когда вы назначаете событие с обработчиком, он обычно создает функция с ее собственным объемом

deleteResult={this.props.destroyResult.bind(null, result.get('id'))} 

Когда вы пишете задание как функцию стрелки, вы получите родительской области

deleteResult={() => this.props.destroyResult(result.get('id'))}