Использование create-реагировать-приложение выбрасывает переменные из области видимости

Question

Я следую учебному пособию в Обучающей реакции О'Рейли.Я пытаюсь создать приложение для рецептов, которое находится на стр. 95 или около того.

Поскольку код в этой книге соединяет React 15 и 16 и кто знает, какую версию Webpack я решил принять их предложения и собрать своиприложение, использующее create-Reaction-app.

Я успешно переключил большую часть кода для работы со структурой cra, но не могу исправить код в этом компоненте:

import React from 'react';
import ReactDOM from 'react-dom';

const Instructions = ({ title, steps }) =>
  <section className="instructions">
    <h2>{title}</h2>
    {steps.map}((s, i) =>
      <p key={i}>{s}</p>
    )
  </section>

export default Instructions

Я получаю ошибку:

Failed to compile
./src/components/Instructions.js
  Line 10:  'i' is not defined  no-undef
  Line 10:  's' is not defined  no-undef

Я пытался явно установить эти переменные с помощью var и отключить ESLinter построчно, но ни одна из них не работает.В дополнение к решению проблемы, я хотел бы понять, почему это работает с Webpack и прямым JSX, но не работает с приложением create-реагировать.

Answer 1

Скобки служат переходом от JSX к JavaScript.В этом случае вы закрываете его не в том месте.Попробуйте:

const Instructions = ({ title, steps }) =>
  <section className="instructions">
  <h2>{title}</h2>
    {steps.map((s, i) =>
      <p key={i}>{s}</p>
    )}
  </section>