Question

使用类内部编写的此函数不会返回jsx组件

我认为我对编写此代码结构有一些理解上的错误

有什么错误吗？

renderDonePage = () => {
  return(
  this.state.loaded ?

    <div style={{ padding: '10px',margin: 30, borderRadius: 8 }}>
    <Row gutter={8}>
          <Card title="Cart Items">
          <Col span={16}>
            {this.renderImage()}
        </Col>
        <Col span={8}>
            {this.renderBoxContent()}
        </Col>
      </Card>
    </Row>
  </div>
:

 <div style={{textAlign:'center',alignItems:'center',verticalAlign:'middle'}} >
  <Spin indicator={antIcon} />
</div>
  )}

应该能够显示并返回结构

Answer 1

this.state.loaded不应出现在您返回的jsx中

RenderDonePage = () => {
    return this.state.loaded ? (

    <div style={{ padding: '10px',margin: 30, borderRadius: 8 }}>
    <Row gutter={8}>
          <Card title="Cart Items">
          <Col span={16}>
            {this.renderImage()}
        </Col>
        <Col span={8}>
            {this.renderBoxContent()}
        </Col>
      </Card>
    </Row>
  </div>
) : (

 <div style={{textAlign:'center',alignItems:'center',verticalAlign:'middle'}} >
  <Spin indicator={antIcon} />
</div>
  )}

Answer 2

我认为代码很好，如果您无法显示所需的结构，则这些函数内部可能会发生错误。检查开发工具中的控制台以查看是否显示任何错误消息。

renderImage()
renderBoxContent()

使用类内部编写的此函数不返回jsx组件

2 个答案: