如何在 const 对象中调用 react 组件中的函数？

Question

我定义了一个包含 table 列的 const 变量，这是调用 React 组件中的函数所必需的。这是我的代码片段：

const columns = [
    {
        title: 'ID',
        dataIndex: 'id',
        key: 'id'
    },
    {
        title: 'edit',
        key: 'action',
        render: (text, record) => (
            <span>
                <Button type='link'>detail</Button>
                <Divider type='vertical' />
                <Button onClick={this.editApp} type='link'>edit</Button>
            </span>
        )
    }
]
class App extends Component {
    state = {
        loading: false,
        pageNum: 1,
        pageSize: 10,
        isAddModalVisible: false,
        isEditModalVisible: true
    }

    enterLoading = () => {
        this.setState({
            loading: true
        })
    }

    editApp = () => {
        this.setState({
            isAddModalVisible: true
        })
    }
}

当我运行这段代码时，告诉我：

TypeError: Cannot read properties of undefined (reading 'editApp')

我应该怎么做才能在 const 列中调用此函数？我试图将列移动到组件中，但仍然没有用。这是我的这个组件的完整代码：

import React, { Component } from 'react'
import CustomBreadcrumb from '@/components/CustomBreadcrumb'
import { Layout, Divider, Row, Col, Table, Button, notification, Form, message } from 'antd'
import '@/style/view-style/table.scss'
import { withRouter } from 'react-router-dom'
import { getAppList, addApp } from '@/service/global/AppService'
import moment from 'moment'
import AddApp from './crud/AddApp'
import EditApp from './crud/EditApp'

const columns = [
    {
        title: 'ID',
        dataIndex: 'id',
        key: 'id'
    },
    {
        title: '应用名',
        dataIndex: 'app_name',
        key: 'app_name'
    },
    {
        title: '应用编号',
        dataIndex: 'app_id',
        key: 'app_id'
    },
    {
        title: '应用英文缩写',
        dataIndex: 'app_abbr',
        key: 'app_abbr'
    },
    {
        title: '用户数',
        dataIndex: 'user_count',
        key: 'user_count'
    },
    {
        title: '上线状态',
        dataIndex: 'online_status',
        key: 'online_status',
        render: (text, record) => <span>{record.online_status === 1 ? '已上线' : '未上线'}</span>
    },
    {
        title: '创建时间',
        dataIndex: 'created_time',
        key: 'created_time',
        render: text => <span>{moment.unix(parseInt(text) / 1000).format('YYYY-MM-DD HH:mm:ss')}</span>
    },
    {
        title: '备注',
        dataIndex: 'remark',
        key: 'remark'
    },
    {
        title: '操作',
        key: 'action',
        render: (text, record) => (
            <span>
                <Button type='link'>详情</Button>
                <Divider type='vertical' />
                <Button onClick={this.editApp} type='link'>编辑</Button>
            </span>
        )
    }
]
class App extends Component {
    state = {
        loading: false,
        pageNum: 1,
        pageSize: 10,
        isAddModalVisible: false,
        isEditModalVisible: true
    }

    enterLoading = () => {
        this.setState({
            loading: true
        })
    }

    addApp = () => {
        this.setState({
            isAddModalVisible: true
        })
    }

    editApp = () => {
        this.setState({
            isEditModalVisible: true
        })
    }

    onPageChange = current => {
        this.setState({
            pageNum: current
        })
        let request = {
            pageSize: this.state.pageSize,
            pageNum: current
        }
        getAppList(request)
    }

    changePageSize(pageSize, current) {
        this.setState({
            pageSize: pageSize
        })
        let request = {
            pageSize: pageSize,
            pageNum: this.state.pageNum
        }
        getAppList(request)
    }

    onAddModalCancelClick = (rowData = {}) => {
        const { isAddModalVisible } = this.state
        this.setState({ isAddModalVisible: !isAddModalVisible })
    }

    onCreateApp = values => {
        let params = {
            appName: values.appName,
            appAbbr: values.appAbbr
        }
        addApp(params)
    }

    componentDidMount() {
        let request = {
            pageSize: this.state.pageSize,
            pageNum: this.state.pageNum
        }
        getAppList(request)
    }

    componentWillUnmount() {
        notification.destroy()
        this.timer && clearTimeout(this.timer)
    }

    render() {
        let data = this.props.app.app.list
        let apps = this.props.app.app

        if ((data && Object.keys(data).length === 0) || data === undefined) {
            return <div></div>
        }

        let total = parseInt(apps.pagination.total)

        const paginationProps = {
            showSizeChanger: true,
            showQuickJumper: true,
            pageSize: apps.pagination.pageSize,
            pageSizeOptions: ['10', '20', '30'],
            showTotal: () => `共${total}条`,
            current: apps.pagination.pageNum,
            total: total,
            onShowSizeChange: (current, pageSize) => this.changePageSize(pageSize, current),
            onChange: current => this.onPageChange(current)
        }

        return (
            <Layout>
                <div>
                    <CustomBreadcrumb arr={['应用', '全局', '应用']}></CustomBreadcrumb>
                </div>

                <Row>
                    <Col>
                        <div className='base-style'>
                            <h3 id='basic'>应用管理</h3>
                            <Divider />
                            <Button
                                type='primary'
                                onClick={this.addApp}
                                shape='round'
                                style={{ width: 90, marginRight: 8 }}>
                                添加应用
                            </Button>
                            <Table columns={columns} dataSource={data} pagination={paginationProps} rowKey='id' />
                            <AddApp
                                visible={this.state.isAddModalVisible}
                                onVisibleChange={this.onAddModalCancelClick}
                                onCreate={this.onCreateApp}
                                {...{ data }}
                            />
                            <EditApp
                                visible={this.state.isEditModalVisible}
                                onVisibleChange={this.onAddModalCancelClick}
                                onCreate={this.onCreateApp}
                                {...{ data }}
                            />
                        </div>
                    </Col>
                </Row>
            </Layout>
        )
    }
}

export default withRouter(App)

Answer 1

You can't access funtion outside its lexical scope

import React, { Component } from "react";
import CustomBreadcrumb from "@/components/CustomBreadcrumb";
import {
  Layout,
  Divider,
  Row,
  Col,
  Table,
  Button,
  notification,
  Form,
  message,
} from "antd";
import "@/style/view-style/table.scss";
import { withRouter } from "react-router-dom";
import { getAppList, addApp } from "@/service/global/AppService";
import moment from "moment";
import AddApp from "./crud/AddApp";
import EditApp from "./crud/EditApp";

class App extends Component {
  state = {
    loading: false,
    pageNum: 1,
    pageSize: 10,
    isAddModalVisible: false,
    isEditModalVisible: true,
  };

  enterLoading = () => {
    this.setState({
      loading: true,
    });
  };

  addApp = () => {
    this.setState({
      isAddModalVisible: true,
    });
  };

  editApp = () => {
    this.setState({
      isEditModalVisible: true,
    });
  };

  onPageChange = (current) => {
    this.setState({
      pageNum: current,
    });
    let request = {
      pageSize: this.state.pageSize,
      pageNum: current,
    };
    getAppList(request);
  };

  changePageSize(pageSize, current) {
    this.setState({
      pageSize: pageSize,
    });
    let request = {
      pageSize: pageSize,
      pageNum: this.state.pageNum,
    };
    getAppList(request);
  }

  onAddModalCancelClick = (rowData = {}) => {
    const { isAddModalVisible } = this.state;
    this.setState({ isAddModalVisible: !isAddModalVisible });
  };

  onCreateApp = (values) => {
    let params = {
      appName: values.appName,
      appAbbr: values.appAbbr,
    };
    addApp(params);
  };

  componentDidMount() {
    let request = {
      pageSize: this.state.pageSize,
      pageNum: this.state.pageNum,
    };
    getAppList(request);
  }

  componentWillUnmount() {
    notification.destroy();
    this.timer && clearTimeout(this.timer);
  }

  render() {
    let data = this.props.app.app.list;
    let apps = this.props.app.app;

    if ((data && Object.keys(data).length === 0) || data === undefined) {
      return <div></div>;
    }

    let total = parseInt(apps.pagination.total);

    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      pageSize: apps.pagination.pageSize,
      pageSizeOptions: ["10", "20", "30"],
      showTotal: () => `共${total}条`,
      current: apps.pagination.pageNum,
      total: total,
      onShowSizeChange: (current, pageSize) =>
        this.changePageSize(pageSize, current),
      onChange: (current) => this.onPageChange(current),
    };

    const columns = [
      {
        title: "ID",
        dataIndex: "id",
        key: "id",
      },
      {
        title: "应用名",
        dataIndex: "app_name",
        key: "app_name",
      },
      {
        title: "应用编号",
        dataIndex: "app_id",
        key: "app_id",
      },
      {
        title: "应用英文缩写",
        dataIndex: "app_abbr",
        key: "app_abbr",
      },
      {
        title: "用户数",
        dataIndex: "user_count",
        key: "user_count",
      },
      {
        title: "上线状态",
        dataIndex: "online_status",
        key: "online_status",
        render: (text, record) => (
          <span>{record.online_status === 1 ? "已上线" : "未上线"}</span>
        ),
      },
      {
        title: "创建时间",
        dataIndex: "created_time",
        key: "created_time",
        render: (text) => (
          <span>
            {moment.unix(parseInt(text) / 1000).format("YYYY-MM-DD HH:mm:ss")}
          </span>
        ),
      },
      {
        title: "备注",
        dataIndex: "remark",
        key: "remark",
      },
      {
        title: "操作",
        key: "action",
        render: (text, record) => (
          <span>
            <Button type="link">详情</Button>
            <Divider type="vertical" />
            <Button onClick={this.editApp} type="link">
              编辑
            </Button>
          </span>
        ),
      },
    ];
    return (
      <Layout>
        <div>
          <CustomBreadcrumb arr={["应用", "全局", "应用"]}></CustomBreadcrumb>
        </div>

        <Row>
          <Col>
            <div className="base-style">
              <h3 id="basic">应用管理</h3>
              <Divider />
              <Button
                type="primary"
                onClick={this.addApp}
                shape="round"
                style={{ width: 90, marginRight: 8 }}
              >
                添加应用
              </Button>
              <Table
                columns={columns}
                dataSource={data}
                pagination={paginationProps}
                rowKey="id"
              />
              <AddApp
                visible={this.state.isAddModalVisible}
                onVisibleChange={this.onAddModalCancelClick}
                onCreate={this.onCreateApp}
                {...{ data }}
              />
              <EditApp
                visible={this.state.isEditModalVisible}
                onVisibleChange={this.onAddModalCancelClick}
                onCreate={this.onCreateApp}
                {...{ data }}
              />
            </div>
          </Col>
        </Row>
      </Layout>
    );
  }
}

export default withRouter(App);

如何在 const 对象中调用 react 组件中的函数？

How to invoke function in react component in const object?

javascript

reactjs

antd