Функция жирной стрелки React Uncaught ReferenceError
Я новичок в программировании и проходил курсы по udemy, чтобы изучить JS, html и css, потому что я читал, что они важны, прежде чем переходить к React. Я столкнулся с проблемой, которую не могу объяснить. Следующий код выполняется правильно и без ошибок:
function FriendLy(props){
return(
<div className = "friendLy">
<Avatar pic = {props.pic}/>
<Username name = {props.name}/>
<GetConnected/>
</div>
);
}
однако следующий код возвращает "Uncaught ReferenceError"
FriendLy = (props) => {
return(
<div className = "friendLy">
<Avatar pic = {props.pic}/>
<Username name = {props.name}/>
<GetConnected/>
</div>
);
}
Насколько я знаю ES6 и JS, эти два выражения должны давать одинаковый результат. Я использую babel, который, как я понимаю, переводит ES5 на ES6.
Пожалуйста, объясните мне, что я неправильно понимаю в любом из приведенных выше утверждений.
заранее спасибо
Uncaught ReferenceError: FriendLy не определен
Да, вы что-то назначаете FriendLy, но JS не знает, что такое FriendLy. Вот почему вы получаете сообщение об ошибке.
Я думал, что создаю функцию под названием FriendLy
Нет, если вы начнете с FriendLy вместо const, var или let (или function). Также: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы хотите сделать это функцией, назначенной переменной, поэтому вам нужно поставить const, var или let перед FriendLy:
var FriendLy = (props) => {...}
Ты уверен в этом
Я получил следующую ошибку: Uncaught SyntaxError: Встроенный сценарий Babel: Ожидается неожиданный токен; (4:24) при применении первого предложения
@DevinMiller - Первое предложение - ерунда.
@Quentin Исправил сейчас, лучше?
Вам нужно добавить const, let или var перед определением переменной, если вы работаете под строгий режим.
const FriendLy = (props) => {
return (
// ...
)
}
Пока это правда, но без const получаю: ReferenceError: assignment to undeclared variable FriendLy
Спасибо! Разве это не было бы эквивалентом: const FriendLy = function (props) {return (// ...)}
@DevinMiller это почти то же самое. Оба определяют функции, но ключевое слово this внутри стрелочных функций ведет себя по-разному.
Это интересно. У меня сложилось впечатление, что функция жирной стрелки - это строго изменение синтаксиса. Судя по вашему ответу, это не так. Спасибо
Это не @DevinMiller, есть изменение объема и привязки this. Кроме того, есть неявная отдача от таких вещей, как однострочные. const thingReturn = () => thisIsReturned
Джейкоб, спасибо. Мне нужно будет изучить этот объем и привязку.
Они не одинаковы. Что такое полная ошибка? (также: стрелочные функции сохраняют родительский контекст, то есть то, на что ссылается
this)