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会使变量超出范围

1 个答案: