javascript - 这个类可以改成React无状态函数吗？

Question

我正在尝试将 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

Answer 1

尝试从第 345 行删除 ;。没有理由让它在那里。另外，不要忘记在 props 周围使用 {}。

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>
    );
}