在反应功能组件中使用相同的代码时缺少按钮

问题描述

在类组件（打字稿文件）中，我以以下方式定义了 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>
        ))

但是，我在没有类的功能组件中使用了相同的东西，我做了以下操作（如 this thread 中的建议 - 使用箭头函数）：

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',overflow: 'hidden'}}/>
                {dynamicColumns}
            </DataTable>
            {/* {assocButtonView(labelValue)} */}
        </div>
    ))

它不断抛出以下错误：

Uncaught ReferenceError: assignment to undeclared variable actionTemplate

当我在 var 前面添加 actionTemplate 时，它没有抛出任何错误，但我在 Action 列中没有看到任何按钮。我错过了什么？

解决方法

在函数式组件中，您不是在声明另一个函数，而是必须将函数分配给一个变量。

所以这是正确的语法：

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