Question

我在webpack构建中遇到以下错误，但我不明白为什么：

SyntaxError: this is a reserved word (11:5)

它发生在Applicatons类的this.props.apps.map代码处。它试图遍历传递的apps属性并创建Application组件的JSX表示形式。我已经将Applications类作为第一部分代码，随后的代码展示了如何在不同的类中实例化Applications组件。 我正在尝试访问Applications类中的props字段，该类扩展了React组件

这里是Applications类，显然我没有正确使用React道具：

import React from 'react';
import ReactDOM from 'react-dom';
import Application from './Application/Application';
import ErrorBoundary from '../ErrorBoundary/ErrorBoundary';

class Applications extends React.Component {

       render(){           
          let applicationsList=null;
          applicationsList = (
             {this.props.apps.map((app,index)=>{
               return <Application 
                  name={app.name} 
                  desc={app.desc}
                  changed={(event)=>this.props.changed(event,app.id)}
                  click={()=>this.props.clicked(index)}
                  key={app.id}
                />
          })}
       );
       return (
        {applicationsList}
       )
    }
}

这是在不同的react组件中实例化Applications组件的代码。

render(){
  let applications=null;
  applications = (
    <div>
     <Applications 
            apps={this.state.apps} 
            clicked={this.deleteApplicationHandler}
            changed={this.nameChangedHandler}/>
    </div>
  );
  return (<div>{applications}</div>);
}

我的反应非常陌生，因此，如果我错过了任何事情，我深表歉意，请让我知道，不及时更新问题。

Answer 1

您正在尝试在JSX之外使用JSX模板语法。圆括号被解释为定义对象文字。卸下多余的支架。

render(){           
  let applicationsList=null;
  applicationsList = this.props.apps.map((app,index)=>{
    return <Application 
      name={app.name} 
      desc={app.desc}
      changed={(event)=>this.props.changed(event,app.id)}
      click={()=>this.props.clicked(index)}
      key={app.id}
    />
   });

   return applicationsList;
}

在React组件中this.props的无效用法

1 个答案: