javascript - 可以将此类更改为React无状态函数吗？

我正在尝试将React类更改为无状态函数，但遇到一些错误。你能帮忙吗？该类以表格格式呈现列表。

我首先尝试：

function LeaseList(props) {
    return (
         <Table hover bordered striped responsive>
             <tbody>
                 {
                     props.isLoading ?
                        <div>Is Loading...</div> :
                        props.leases.map(lease =>
                            <Lease key=lease._links.self.href
                                   lease=lease
                                   attributes=props.attributes
                                   handleDelete=props.handleDelete
                                   handleUpdate=props.handleUpdate/>
                        );
                 }
             </tbody>
         </Table>
    );
}

但是出现了错误：

JSX value should be either an expression or a quoted JSX text (345:39)

  343 |                         <div>Is Loading...</div> :
  344 |                         props.leases.map(lease =>
> 345 |                             <Lease key=lease._links.self.href
      |                                        ^
  346 |                                    lease=lease
  347 |                                    attributes=props.attributes
  348 |                                    handleDelete=props.handleDelete

然后，我尝试将方括号括起来，如下所示：

function LeaseList(props) {
    return (
         <Table hover bordered striped responsive>
             <tbody>
                 {
                     props.isLoading ?
                        <div>Is Loading...</div> :
                        props.leases.map(lease =>
                            <Lease key={lease._links.self.href}
                                   lease={lease}
                                   attributes={props.attributes}
                                   handleDelete={props.handleDelete}
                                   handleUpdate={props.handleUpdate}/>
                        );
                 }
             </tbody>
         </Table>
    );
}

但是出现了错误：

Unexpected token, expected } (350:25)

  348 |                                    handleDelete={props.handleDelete}
  349 |                                    handleUpdate={props.handleUpdate}/>
> 350 |                         );
      |                          ^
  351 |                  }
  352 |              </tbody>
  353 |          </Table>

更新1：删除；来自）;

function LeaseList(props) {
    return (
         <Table hover bordered striped responsive>
             <tbody>
                 {
                     props.isLoading ?
                        <div>Is Loading...</div> :
                         props.leases.map(lease =>
                            <Lease key=lease._links.self.href
                                   lease=lease
                                   attributes=props.attributes
                                   handleDelete=props.handleDelete
                                   handleUpdate=props.handleUpdate/>
                        )
                 }
             </tbody>
         </Table>
    );
}

仍然失败，并显示相同的错误：

JSX value should be either an expression or a quoted JSX text (345:39)

  343 |                         <div>Is Loading...</div> :
  344 |                          props.leases.map(lease =>
> 345 |                             <Lease key=lease._links.self.href
      |                                        ^
  346 |                                    lease=lease
  347 |                                    attributes=props.attributes
  348 |                                    handleDelete=props.handleDelete

最佳答案

尝试从第345行中删除;。没有理由这样做。同样不要忘记在道具周围使用{}。

function LeaseList(props) {
    return (
         <Table hover bordered striped responsive>
             <tbody>
                 {
                     props.isLoading ?
                        <div>Is Loading...</div> :
                        props.leases.map(lease =>
                            <Lease key={lease._links.self.href}
                                   lease={lease}
                                   attributes={props.attributes}
                                   handleDelete={props.handleDelete}
                                   handleUpdate={props.handleUpdate}/>
                        )
                 }
             </tbody>
         </Table>
    );
}