Зачем мне нужно привязывать эту функцию стрелки в области карты?

Я пытаюсь отобразить массив из объекта массива, используя класс ListRecipes extends React . Компонент { showIngredients = ( item ) => { console . log ( item . components ) } render () { const { list } = this . реквизит ; let Recipe = list . map (( item , index ) => { let boundClick = this . showIngredients . bind ( this , item ); return < li key = { index } onClick = { boundClick }> { item . recipeName } </ li > }) return ( < div > < ul > { Recipe } </ ul > </ div > ) } } событие на li, я использую функцию стрелки, но я узнал, что мне нужно связать функцию Почему это так? Разве это не значит, что цель стрелки исключает необходимость привязки?

class ListRecipes extends React.Component   {

    showIngredients = (item) => (event) => {
        console.log(item.ingredients)
    }

    render() {
    const { list } = this.props;
    let Recipe = list.map((item, index) => {
        return <li key={index} onClick={this.showIngredients(item)}> {item.recipeName} </li>
    })
    return (
        <div>
            <ul>
                {Recipe}
            </ul>
        </div>
        )
    }
}

Также в чем разница между этим кодом, который возвращает новую функцию из вышеперечисленного?

onClick={this.showIngredients(item)}

javascript,reactjs,ecmascript-6,arrow-functions,

-1

Ответов: 3


0

Когда вы пишете, вы не назначаете ссылку функции на onClick, но вызываете ееlet Recipe = list.map((item, index) => { return <li key={index} onClick={() => this.showIngredients(item)}> {item.recipeName} </li> })

Вы можете изменить его на

let boundClick = this.showIngredients.bind(this, item);

Кроме того, showIngredientsвы связываете boundClickфункцию с контекстом и передаете ему дополнительный аргумент, а поскольку bind возвращает новую функцию, то onClickэто функция, которая затем назначаетсяonClick


0

Я думаю, что этот код обычно предпочтительнее:

let boundClick = this.showIngredients.bind(this, item);

Вы привязываете элемент к функции showIngredients. Таким образом, вы в конечном итоге создаете items.length количество отдельных ссылок на функции, каждая привязана к этому и текущему элементу.


0

Прежде всего нам нужно понять, что переданный аргумент в callback-прослушивателе onClick является событием . Это значит

function myMethod(event) {
  // only event is passed as argument
}
<div onClick={myMehtod}/>

Итак, вопрос в том, как вы можете передать дополнительный аргумент? Просто. Вызовите желаемый метод из прослушивателя.

function calculate(item){
  // no event trace here
}

<div onClick={function(event) { calculate(item) }}/>
// OR better, fat arrow
<div onClick={event => calculate(item)}/>

Помните, что жирная стрелка всегда привязана к этой области, а не к прототипу.

class Component {
  scopedMethod = () => {
     this.name = 'John';
  }
  prototypeMethod() {
    this.name = 'John';
  }
  render() {
    return (
      <div>
        {/* works */}
        <button onClick={this.scopedMethod}/>
        {/* OOPS, 'this' is event rather then component */}
        <button onClick={this.prototypeMethod}/>
        {/* works */}
        <button onClick={() => this.prototypeMethod()}/>
        {/* works */}
        <button onClick={this.prototypeMethod.bind(this)}/>
      </div>
    )
  }
}

Надеюсь, это принесло свет. Так что вопрос будет тогда, когда и почему я хотел бы использовать метод с привязкой к объему по методу прототипа и наоборот? Ну, прототипные методы дешевы. Всегда старайтесь использовать их. Однако некоторые разработчики избегают лямбда-функции (генерируют функцию внутри рендера), потому что это может вызвать проблемы с производительностью. Когда вам нужно повторно отобразить компонент 10x за секунду, то новая лямбда создается 10 раз.

JavaScript, reactjs, ECMAScript-6, стрелка-функции,
Похожие вопросы