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行删除;。没有理由这样做。另外，不要忘记在道具周围使用{}。

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

Answer 2

你忘记了一些大括号第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>
    );
}

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

2 个答案: