Question

我正在学习用React编写代码，并与JSX语法有些混淆。

我试图理解，但一次又一次地感到困惑。如果有人向我解释这段代码到底发生了什么以及出了什么问题，那会更好。

在这里，我尝试使用以下代码遍历表单元素数组：

const form = formElementArray.map(element =>{ 
     <Input 
        key = {element.id} 
        elementType={element.config.elementType}
        elementConfig={element.config.elementConfig} 
        value={element.config.value}
        inValid = {!element.config.valid}
        touched = {element.config.touched}
        changed={(event)=>this.onChangeHandler(event,element.id)}
        shouldValidate={element.config.validation}>
    </Input>
})

错误：期望分配或函数调用，而是看到一个表达式。

Answer 1

当您不提供开括号时，使用箭头功能可以发出return关键字。

要修复，请从箭头功能中删除{和}

const form = formElementArray.map(element => 
                     <Input 
                        key = {element.id} 
                        elementType={element.config.elementType}
                        elementConfig={element.config.elementConfig} 
                        value={element.config.value}
                        inValid = {!element.config.valid}
                        touched = {element.config.touched}
                        changed={(event)=>this.onChangeHandler(event,element.id)}
                        shouldValidate={element.config.validation}>
                        </Input>
                )

Answer 2

JSX表达式：

{<div>some html tag with one root tags. wrapping brackets { and } </div>}

JSX表示JavaScript XML。也就是说，您可以在JavaScript文件中编写html。
箭头功能：

const randomFunc1 = (param) => {
  var data = 'some data' + param;
  return data;
}
OR
const randomFunc2 = param => {
  var data = 'some data' + param;
  return data;
}
OR
const randomFunc3 = param => 'some data' + param;

在randomFunc1，randomFunc2，randomFunc3上方执行与一个相同的操作。 randomFunc3是最短的语法。
您的代码还可以。但是map函数需要返回语句来创建一个新数组。因此只需在return标记之前添加一个<Input>关键字

需要对React的JSX语法进行澄清

2 个答案: