使用 create-react-app 将变量抛出范围

Question

我正在学习 O'Reilly 的 Learning React 中的教程。我正在尝试构建第 95 页左右的食谱应用程序。

因为本书中的代码桥接了 React 15 和 16，谁知道是哪个版本的 Webpack 我决定采纳他们的建议并使用 create-react-app 构建我的应用程序。

我已成功更改大部分代码以使用 c-r-a 的结构，但我无法修复此组件中的代码：

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-react-app 不兼容。

Answer 1

括号作为从 JSX 到 JavaScript 的转义。在这种情况下，您将其关闭在错误的位置。尝试：

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

使用 create-react-app 将变量抛出范围

Using create-react-app throws variables out of scope

reactjs

create-react-app