使用create-react-app会使变量超出范围

问题描述 投票:0回答:1

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

因为本书中的代码是React 15和React 16的桥梁,并且谁知道Webpack的版本,所以我决定采纳他们的建议,并使用create-react-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-react-app一起使用。

reactjs create-react-app
1个回答
3
投票

括号用作从JSX到JavaScript的转义符。 在这种情况下,您会将其关闭在错误的位置。 尝试:

const Instructions = ({ title, steps }) =>
  <section className="instructions">
  <h2>{title}</h2>
    {steps.map((s, i) =>
      <p key={i}>{s}</p>
    )}
  </section>
© www.soinside.com 2019 - 2024. All rights reserved.