На jscomplete мы управляем Slack Account посвящено помощи ученикам кода отклеиваться. Теперь мы получаем некоторые интересные проблемы, а потом, но большинство заданных вопросов для общих проблем. Я создаю этот ресурс, чтобы написать подробные инструкции для общих проблем для начинающих review.js обычно сталкиваются, чтобы я мог отослать их здесь, а не печатать его снова и снова.
1 – не запуск имени компонента с заглавной буквой
Актуальный компонент должен иметь имя, которое начинается с заглавной буквы.
Если имя компонента не начинается с заглавной буквы, использование компонентов будет рассматриваться как Встроенный элемент, такой как Div или промежуток Отказ
Например:
class greeting extends React.Component {
// ...
}
Если вы попытаетесь сделать <Приветствие/> Реагирование будет игнорировать вышеизложенное, и вы получите предупреждение:
Warning: The tagis unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
Более большая проблема здесь, когда вы решите назвать свой компонент кнопка или IMG Отказ Реагировать будет игнорировать ваш компонент и просто рендер ванильный HTML кнопка или IMG тег.
Обратите внимание, как «моя потрясающая кнопка» не была отображена выше и реагировать, просто отображается пустой элемент HTML-кнопки. Реагировать не предупреждает вас в этом случае.
2 – используя отдельные цитаты вместо обратных тиков
Струны, созданные с обратными клещами (`…`), отличаются от струн, созданных с одиночными цитатами («…»).
На большинстве клавиатур символ Back-Tick (`) можно набрать с помощью клавиши над вкладка ключ Отказ
Мы создаем строку, используя обратные тики, когда нам нужно включить динамические выражения внутри этой строки (не прибегая к конкатенации строки).
`This is a string template literal that can include expressions` 'This is just a string, you cannot include expressions here'
Допустим, вы хотите, чтобы строка, которая всегда сообщает о текущем времени: "Время - это ..."
// Current time string
const time = new Date().toLocaleTimeString();
// When using regular strings (single or double quotes),
// you need to use string concatenation:
'Time is ' + time
// When using back-ticks,
// you can inject the time in the string using ${}
`Time is ${time}`
Кроме того, при использовании строковых литералов (с обратно-клещами) вы можете создать строку, которая охватывает несколько строк:
const template = `I CAN SPAN Multiple Lines`;
Вы не можете сделать это с обычными строками.
3- Использование React.PropTypes.
Пропорты Объект был удален из реагирования. Раньше было доступно как React.PropTypes Но вы больше не можете использовать это.
Вместо этого вам нужно:
- Добавить новый Типы опоры Пакет к вашему проекту:
NPM установить типы опоры - Импортировать это:
Импортные пропиты из «Опора»
Тогда вы можете использовать его. Например: Пропорты .string Отказ
Если вы неправильно используете React.PropTypes Вы получите ошибки, как:
TypeError: Cannot read property 'string' of undefined
4 – не использует правильные версии того, что пользуется учебником
При просмотре или чтении содержимого о кодировании и выполнении с примерами, которые они присутствуют, убедитесь, что вы используете правильные версии инструментов, которые использует контент. Обычно использование последней версии каждого инструмента является безопасная ставка, но если контент немного старый, вы можете столкнуться с некоторыми проблемами обесценения.
Быть в безопасности, придерживаться основных версий для используемых инструментов. Например, если учебное пособие использует RECTIC 16, не выполняйте использование React 15.
Это особенно важно для Node.js. Вы столкнетесь с серьезными проблемами, если вы используете более старую версию узла. Например, если вы следуете наряду с некоторым уроком, который использует Object.values И вы используете узел 6.x, этот метод не существует тогда. Вам нужен узел 7.x или выше.
5- запутанные функции с классами
Можете ли вы сказать, что не так с следующим кодом?
class Numbers extends React.Component {
const arrayOfNumbers = _.range(1, 10);
// ...
}
Код выше недействителен, потому что внутри корпуса класса JavaScript у вас нет свободы практически ничего. Вы можете определить только методы и свойства, используя ограниченный синтаксис.
Это немного запутано, потому что {} Используется в синтаксисе классов, похоже на простоту, но это не так.
Внутри компонента на основе функций у вас есть свобода только что-либо:
// Totally Okay:
const Number = (props) => {
const arrayOfNumbers = _.range(1, 10);
// ...
};
6 – прохождение номеров как строки
Вы можете передать значение SPOP со строкой:
Если вам нужно пройти числовое значение, не используйте строки:
// Don't do this
Вместо этого используйте фигурные скобки для передачи фактического числового значения:
// Do this instead
Использование {7} , внутри Приветствие Компонент, This.props.counter будет иметь фактическую числовую 7 Значение, и это будет безопасно делать математические операции на этом. Если вы передадите это как "7" а затем относиться к этому как число, вы можете столкнуться с неожиданными результатами.
7 – забыть о том, что другой экземпляр приложения все еще использует тот же порт
Чтобы запустить веб-сервер, вам необходимо использовать хост (например, 127.0.0.1) и порт (например, 8080), чтобы сервер прослушивал запрос на действительный HTTP-адрес.
После того, как веб-сервер успешно запущен, он имеет контроль над этим портом. Вы не можете использовать один и тот же порт для чего-либо еще. Порт будет занят.
Если вы попытаетесь запустить один и тот же сервер в другом терминале, вы получите ошибку, что порт «используется». Что-то вроде:
Error: listen EADDRINUSE 127.0.0.1:8080
Помните, что иногда веб-сервер может работать в Фон или внутри отдельной сессии экрана/TMUX. Вы не видите это, но он все еще занимает порт. Чтобы перезапустить свой сервер, вам нужно «убить» тот, который все еще работает.
Чтобы определить процесс, который использует определенный порт, вы можете либо использовать команду, такой как PS (и grep для чего-то о вашем приложении) или если вы знаете номер порта, вы можете использовать lsof команда:
lsof -i :8080
8 – забыть создать переменные среды
Некоторые проекты зависят от существования переменных среды оболочки, чтобы начать. Если вы запускаете эти проекты без необходимых переменных среды, они попытаются использовать неопределенные значения для них и потенциально приведут вам некоторые загадочные ошибки.
Например, если проект подключается к базе данных, такую как Mongodb, шансы это использует переменную среды, как Process.env.mongo_uri подключиться к нему. Это позволяет использовать проект с различными экземплярами MongoDB в разных средах.
Чтобы локально запустить проект, который подключается к MongoDB, вы должны экспортировать Mongo_uri Переменная среды первая. Например, если у вас есть локальный Mongodb, работающий на порту 27017 , вам нужно было бы сделать это, прежде чем запустить проект:
export MONGO_URI = "mongodb://localhost:27017/mydb"
Вы можете Греп Исходный код проекта для Process.env Выяснить, какие переменные среды ему нужны для правильной работы.
9 – запутанные фигурные брекеты {} с круглыми скобками ()
Вместо:
return {
something();
};
Тебе нужно:
return ( something(); );
Первый попытается (и пройти неудачу), чтобы вернуть объект, а второй правильно позвонит что-то () Функция и вернуть то, что возвращает эту функцию.
С любое
Эта проблема также распространена в функциях стрелки ‘ коротко синтаксис.
Вместо:
const Greeting = () => {
Hello World
};
Тебе нужно:
const Greeting = () => (Hello World);
При использовании фигурных скобок с функцией стрелки вы начинаете сферу этой функции. Короткий синтаксис функций стрелки не использует фигурные скобки.
10 – не упаковывать предметы с круглыми скобками
Количество скобок против скобок задач выше, также сбивает с толку, когда вы хотите создать короткую функцию стрелки, которая возвращает простой старый объект.
Вместо:
const myAction = () => { type: 'DO_THIS' };
Тебе нужно:
const myAction = () => ({ type: 'DO_THIS'});
Без обертывания объекта в скобках вы не будете использовать короткий синтаксис. Вы на самом деле будете определять метку для строки!
Это распространено внутри Updater Функция SetState Метод, потому что ему необходимо вернуть объект. Вам нужно обернуть этот объект с круглыми скобками, если вы хотите использовать синтаксис функции короткой стрелки.
Вместо:
this.setState(prevState => { answer: 42 });
Тебе нужно:
this.setState(prevState => ({ answer: 42 }));
11 – не используя правильную капитализацию элементов API и реквизита
Это Ract.component , не Ract.component Отказ Это ComponentDidmount , не ComponentDidmount Отказ Это Обычно Реагировать , не Реагировать Отказ
Обратите внимание на капитализацию API, которые вам нужны. Если вы используете некорректную капитализацию, ошибки, которые вы получите, могут не четко указывать, в чем проблема.
При импорте из реагировать и React-Dom Убедитесь, что вы импортируете правильные имена и то, что вы используете, точно так же, как то, что вы импортируете. Eslint может помочь вам указать, что не используется.
Эта проблема также распространена при доступе к компонентам реквизита:
// Inside the component, you need props.userName
Если вместо rops.uername Вы неправильно используете rops.uername или rops.uername Вы будете использовать неопределенное значение. Обратите внимание на это или еще лучше, сделайте свою конфигурацию ESLINT.
12- Смущает объект состояния с свойствами экземпляра
В компоненте класса вы можете определить местный Государство объект и позже получить его с помощью это :
class Greeting extends React.Component {
state = {
name: "World",
};
render() {
return `Hello ${this.state.name}`;
}
}
Приведенное выше будет выводить «Hello World».
Вы также можете определить другие локальные мгновенные свойства рядом со штатом:
class Greeting extends React.Component {
user = {
name: "World",
};
render() {
return `Hello ${this.user.name}`;
}
}
Вышеуказанное также будет выводить «Hello World».
Государство Свойство экземпляра является особенным, потому что реагирование будет управлять им. Вы можете изменить его только через SetState и реагировать бы реагировать когда вы делаете. Однако все другие свойства экземпляра, которые вы определяете, не влияют на алгоритм рендеринга. Вы можете изменить Это В приведенном выше примере, как вы хотите, и отреагируйте, не будут вызывать цикл рендеринга в реакции.
13 – запутано
Не прокладывайте / персонаж в ваших закрытых бирках. По общему признанию, иногда вы можете использовать Отказ
В HTML есть что-то называемое «самозакрывающему метку» (aka void tag). Это теги, представляющие элементы, которые не имеют никих узлов. Например, IMG Тег – это самозакрытие:
// You don't use
![]()
А Div Теги могут иметь детей, и поэтому вы используете открытие и закрытие тегов:
Children here...
То же самое относится и к компонентам реагирования. Если компонент имеет содержание детей, это может выглядеть так:
Hello! // Notice the position of the / character.
Если у компонента нет детей, вы можете написать его с метками открытых/закрытий или просто меткой самозакрытия:
// 2 valid ways// Notice how the / character moves based on whether the element // is self-closing or not
Следующее использование неверно:
// Wrong
Если вы неправильно побыли / Персонаж, вы получите ошибки, как:
Syntax error: Unterminated JSX contents
14 – Предполагая, что импорт/экспорт будет просто работать
Функция импорта/экспорта является официальной функцией в JavaScript (с 2015 года). Тем не менее, это единственная функция ES2015, которая еще не полностью поддерживается в современных браузерах и новейшем узле.
Популярная конфигурация проекта React использует WebPack и Babel. Оба разрешают использовать эту функцию и скомпилировать его до чего-то, что все браузеры могут понять. Вы можете использовать только импорт/экспорт, если у вас есть что-то вроде WebPack или Babel в вашем потоке.
Тем не менее, имея импорт/экспорт в вашем приложении в связи с реагированием не означает, что вы можете просто использовать их где угодно! Например, если вы также выполняете рендеринг на стороне сервера через последний узел, все не будут работать для вас. Скорее всего, вы получите ошибку « неожиданный токен ».
Чтобы узел понять ввод импорта/экспорта, а также что-то нужно, если вы используете их на интерфейсе, а также хотите сделать SSR), вам придется запустить сам узел с предустановкой Babel (например, env Предустановленные), которые могут их трансать. Вы можете использовать инструменты, такие как PM2 , Номемон и Бабел-часы Для этого в разработке и узел перезагрузите каждый раз, когда вы что-то измените.
15 – не обязательные способы обработчика
Я сохранил этот за последний, потому что это большая и очень распространенная проблема.
Вы можете определить методы класса в компоненте реагирования, а затем использовать их в компоненте оказывать метод. Например:
class Greeting extends React.Component {
whoIsThis() {
console.dir(this); // "this" is the caller of whoIsThis
return "World";
}
render() {
return `Hello ${this.whoIsThis()}`;
}
}
ReactDOM.render(Я использовал WHOSTHIS Метод внутри оказывать Метод с Это. Чемистхис потому что внутри оказывать , это Ключевое слово относится к экземпляру компонента, связанного с элементом DOM, который представляет компонент.
Реагируйте внутренне, гарантируют, что « это » Внутри его классовых методов относится к экземпляру. Однако JavaScript не связывает экземпляр автоматически при использовании Ссылка к WHOSTHIS метод.
Console.dir линия в WHOSTHIS будет правильно сообщать об экземпляре компонента, потому что этот метод назывался напрямую от оказывать Метод с явный Звонящий ( это ). Вы должны увидеть Приветствие Объект в консоли Когда вы выполняете код выше:
Однако, когда вы используете тот же метод в Задержка-исполнение Канал, такой как Обработчик событий звонящий больше не будет явным и Console.dir Линия не будет сообщать об экземпляре компонентов.
Смотрите код и вывод (после нажатия) ниже.
В коде выше, Rect вызывает WHOSTHIS Метод при нажатии на строку, но он не даст вам доступа к экземпляру компонента внутри него. Вот почему вы получаете undefined Когда мы нажимаем на строку. Это проблема, если ваш класс метод требует доступа к таким вещам, как Это .props и Это Отказ Это просто не будет работать.
Есть много решений для этой проблемы. Вы можете обернуть метод встроенной функции или использовать .bind Позвоните, чтобы заставить метод запомнить его абонент. Оба в порядке для нечасто-обновленных компонентов. Вы также можете оптимизировать метод Bind, делая его в Конструктор класса, а не в методе рендера. Тем не менее, лучшее решение этого метода заключается в том, чтобы включить функцию классов классов Ecmascript (которая по-прежнему этап-3) через Babel и просто используйте функцию стрелки для обработчиков:
class Greeting extends React.Component {
whoIsThis = () => {
console.dir(this);
}
render() {
return (
Hello World
);
}
}
Это будет работать, как ожидалось:
Это все сейчас. Спасибо за прочтение.
Проверьте мой Узнать React.js by Строительные игры книга:
У меня также есть несколько других книг, которые могут вас заинтересовать:
- Учить кодировку с современным JavaScript
- Node.js за пределами оснований
- Профессиональный программист
Эта статья была первоначально опубликована здесь