在反应功能组件中使用相同代码时按钮丢失
Buttons missing when using same code in react functional component
在 class 组件(打字稿文件)中,我按以下方式定义了 actionTemplate
:
//Inside constructor:
constructor(props: Props) {
super(props);
this.actionTemplate = this.actionTemplate.bind(this);
this.state = {
//state variables
};
}
actionTemplate = (rowData: any) => (
<div style={{textAlign: 'center', width: '6em'}}>
<span>
<Button type='button' icon="pi pi-pencil" style={{marginRight: '5px'}} onClick={(e) => this.handleClick(rowData, e)} tooltip='Edit'/>
<Button icon="pi pi-trash" style={{marginRight: '5px'}} tooltip='Delete' />
{
rowData.fullPathName !== null &&
<Button icon="pi pi-download" tooltip='Download' onClick={(e) => this.handleDownloadClick(rowData, e)} />
}
</span>
</div>
);
const GridView = labelValue => ((this.state.assocVisible || this.state.assetFormVisible)? null: (
<div>
<DataTable
//some datable properties
>
<Column key='actionButton' field='actionButton' header='Action' body={this.actionTemplate} style={{maxHeight: '30px !important', whiteSpace: 'nowrap', overflow: 'hidden'}}/>
{dynamicColumns}
</DataTable>
</div>
))
但是,我在没有 class 的功能组件中使用了相同的东西,我做了以下操作(如 中所建议 - 使用箭头函数):
actionTemplate = (rowData) => (
<div style={{textAlign: 'center', width: '6em'}}>
<span>
<Button type='button' icon="pi pi-pencil" style={{marginRight: '5px'}} onClick={(e) => handleClick(rowData, e)} tooltip='Edit'/>
<Button icon="pi pi-trash" style={{marginRight: '5px'}} tooltip='Delete' />
{
rowData.fullPathName !== null &&
<Button icon="pi pi-download" tooltip='Download' onClick={(e) => handleDownloadClick(rowData, e)} />
}
</span>
</div>
);
const GridView = labelValue => ((assocVisible[0] || assetFormVisible[0])? null: (
<div>
<DataTable
//some datable properties
>
<Column key='actionButton' field='actionButton' header='Action' body={actionTemplate} style={{maxHeight: '30px !important', whiteSpace: 'nowrap', overflow: 'hidden'}}/>
{dynamicColumns}
</DataTable>
{/* {assocButtonView(labelValue)} */}
</div>
))
它不断抛出以下错误:
Uncaught ReferenceError: assignment to undeclared variable actionTemplate
当我在 actionTemplate
前面添加 var
时,它没有抛出任何错误,但我在“操作”列中看不到任何按钮。我错过了什么?
在函数式组件中,您没有声明另一个函数,您必须将函数分配给一个变量。
所以这是正确的语法:
const actionTemplate = (rowData) => (
<div style={{textAlign: 'center', width: '6em'}}>
<span>
<Button type='button' icon="pi pi-pencil" style={{marginRight: '5px'}} onClick={(e) => handleClick(rowData, e)} tooltip='Edit'/>
<Button icon="pi pi-trash" style={{marginRight: '5px'}} tooltip='Delete' />
{
rowData.fullPathName !== null &&
<Button icon="pi pi-download" tooltip='Download' onClick={(e) => handleDownloadClick(rowData, e)} />
}
</span>
</div>
);
const GridView = labelValue => ((assocVisible[0] || assetFormVisible[0])? null: (
<div>
<DataTable
//some datable properties
>
<Column key='actionButton' field='actionButton' header='Action' body={actionTemplate} style={{maxHeight: '30px !important', whiteSpace: 'nowrap', overflow: 'hidden'}}/>
{dynamicColumns}
</DataTable>
{/* {assocButtonView(labelValue)} */}
</div>
))
在 class 组件(打字稿文件)中,我按以下方式定义了 actionTemplate
:
//Inside constructor:
constructor(props: Props) {
super(props);
this.actionTemplate = this.actionTemplate.bind(this);
this.state = {
//state variables
};
}
actionTemplate = (rowData: any) => (
<div style={{textAlign: 'center', width: '6em'}}>
<span>
<Button type='button' icon="pi pi-pencil" style={{marginRight: '5px'}} onClick={(e) => this.handleClick(rowData, e)} tooltip='Edit'/>
<Button icon="pi pi-trash" style={{marginRight: '5px'}} tooltip='Delete' />
{
rowData.fullPathName !== null &&
<Button icon="pi pi-download" tooltip='Download' onClick={(e) => this.handleDownloadClick(rowData, e)} />
}
</span>
</div>
);
const GridView = labelValue => ((this.state.assocVisible || this.state.assetFormVisible)? null: (
<div>
<DataTable
//some datable properties
>
<Column key='actionButton' field='actionButton' header='Action' body={this.actionTemplate} style={{maxHeight: '30px !important', whiteSpace: 'nowrap', overflow: 'hidden'}}/>
{dynamicColumns}
</DataTable>
</div>
))
但是,我在没有 class 的功能组件中使用了相同的东西,我做了以下操作(如
actionTemplate = (rowData) => (
<div style={{textAlign: 'center', width: '6em'}}>
<span>
<Button type='button' icon="pi pi-pencil" style={{marginRight: '5px'}} onClick={(e) => handleClick(rowData, e)} tooltip='Edit'/>
<Button icon="pi pi-trash" style={{marginRight: '5px'}} tooltip='Delete' />
{
rowData.fullPathName !== null &&
<Button icon="pi pi-download" tooltip='Download' onClick={(e) => handleDownloadClick(rowData, e)} />
}
</span>
</div>
);
const GridView = labelValue => ((assocVisible[0] || assetFormVisible[0])? null: (
<div>
<DataTable
//some datable properties
>
<Column key='actionButton' field='actionButton' header='Action' body={actionTemplate} style={{maxHeight: '30px !important', whiteSpace: 'nowrap', overflow: 'hidden'}}/>
{dynamicColumns}
</DataTable>
{/* {assocButtonView(labelValue)} */}
</div>
))
它不断抛出以下错误:
Uncaught ReferenceError: assignment to undeclared variable actionTemplate
当我在 actionTemplate
前面添加 var
时,它没有抛出任何错误,但我在“操作”列中看不到任何按钮。我错过了什么?
在函数式组件中,您没有声明另一个函数,您必须将函数分配给一个变量。
所以这是正确的语法:
const actionTemplate = (rowData) => (
<div style={{textAlign: 'center', width: '6em'}}>
<span>
<Button type='button' icon="pi pi-pencil" style={{marginRight: '5px'}} onClick={(e) => handleClick(rowData, e)} tooltip='Edit'/>
<Button icon="pi pi-trash" style={{marginRight: '5px'}} tooltip='Delete' />
{
rowData.fullPathName !== null &&
<Button icon="pi pi-download" tooltip='Download' onClick={(e) => handleDownloadClick(rowData, e)} />
}
</span>
</div>
);
const GridView = labelValue => ((assocVisible[0] || assetFormVisible[0])? null: (
<div>
<DataTable
//some datable properties
>
<Column key='actionButton' field='actionButton' header='Action' body={actionTemplate} style={{maxHeight: '30px !important', whiteSpace: 'nowrap', overflow: 'hidden'}}/>
{dynamicColumns}
</DataTable>
{/* {assocButtonView(labelValue)} */}
</div>
))